I shared a post a while ago on how to create a color coded calendar in SharePoint. This is a no code (for real!) solution, and I’ve received some great feedback from it. One area I want to focus on are the colors.
Let’s go from blah
To, well, more colorful, not sure if I’d call this awesome or not (my color matching skills are lacking)
If you haven’t noticed, there are some colors which are really close to each other, and could easily be mistaken for each other. It’s rather frustrating. Also, they’re all pastels, which is nice but what if I want it to pop on the page?
You can setup a custom style sheet on your calendar page to override the colors. Unfortunately, this will not change the colors at the time you setup the calendars. To keep your colors straight, here’s the colors, and their associated values:
See the close similarities? 1 and 3; 4 and 6; 7, 8 and 9. You only have 5 unique colors to work with.
As you create your color coded calendar, make note of the color #s you’re using, this will be important when creating the new color scheme. And since we’re talking about color schemes, I highly recommend using a comfortable color scheme. You don’t want your calendar to hurt your users. You may only want to change a few colors instead of the entire collection. There are a lot of color schemes and combos online, if you want to create your own, check out http://colorexplorer.com/. Take some time and figure out your ideal color scheme.
Now that you have your colors, let’s get started! First thing you want to do is follow my other post and make your color coded calendar, click here to open the post. Your end result should be a spread of drab pastel colors, like my first image on this post.
Okay, now that you have your color coded calendar, let’s change some colors! You don’t have to change every color in the list, or you may want to. Up to you. I’m going to change colors 3, 4, 8 and 9, and use some real colors that pop.
How? Magical CSS classes:
.ms-acal-color# { BACKGROUND-COLOR: #xxxxxx } .ms-acal-selcolor# { BACKGROUND-COLOR: #xxxxxx } .ms-acal-apanel-color# { BORDER-COLOR: #xxxxxx; BACKGROUND-COLOR: #xxxxxx; }
The above 3 classes of styles represent one color. The first class is the color you see when the page loads, and you haven’t clicked on the item. The second is the selected color when you hover on it. The third class is the color in the legend, on the left of the calendar view.
See at the end of the class name, before the {, is a #. This is just a place holder, you’ll want to swap this out with the color above you want to change. For example, if you want to change color 4, you’d update your CSS like:
.ms-acal-color4, .ms-acal-selcolor4, and .ms-acal-apanel-color4
You can copy and paste the CSS as many times as you need, for numbers 1 through 9. Within each section you’ll see BACKGROUND-COLOR: #xxxxxx, and in the last CSS you’ll see BORDER-COLOR :#xxxxxx as well. This is where your new color scheme comes into play.
I’m going use this neat color scheme I quickly found:
![Beach Color Scheme for SharePoint Calendar](https://i0.wp.com/davidlozzi.com/wp-content/uploads/2012/06/screenshot290.jpg?resize=129%2C400)
Any scheme you find you’ll want to find the HTML, hexidecimal, or CSS value, for your colors (naming varies depending on the site you get it from). It’ll be a 6 character code, usually starting with #. Take the above CSS classes and create your new CSS classes using the colors your picked for your previously made calendar, and specify your own color palette. Here’s what mine will look like:
.ms-acal-color3{ BACKGROUND-COLOR: #C0362C } .ms-acal-selcolor3{ BACKGROUND-COLOR: #C0362C } .ms-acal-apanel-color3{ BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #C0362C; } .ms-acal-color4{ BACKGROUND-COLOR: #816C5B } .ms-acal-selcolor4{ BACKGROUND-COLOR: #816C5B } .ms-acal-apanel-color4{ BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #816C5B; } .ms-acal-color8{ BACKGROUND-COLOR: #668D3C } .ms-acal-selcolor8{ BACKGROUND-COLOR: #668D3C } .ms-acal-apanel-color8{ BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #668D3C; } .ms-acal-color9{ BACKGROUND-COLOR: #007996 } .ms-acal-selcolor9{ BACKGROUND-COLOR: #007996 } .ms-acal-apanel-color9{ BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #007996; }
For the border color, I decided to go with a grey. Once you have your CSS together, let’s get it into SharePoint!
Browse to your color coded calendar.
- Click Site Actions, then Edit Page. This will switch the page into edit mode.
- Click Add a Web Part above the calendar.
- Select Forms in the Categories from the top left, then select HTML Form Web part. Click Add
- Hover over the web part and click on the web part menu, on the right
- The task pane will appear on the far right. Click Source Editor.
- Delete what’s in there now, and then type in:
<style type="text/css">
- Paste in your CSS.
- Type in at the bottom of the page
</style>
- You should see something similar to
- Click Save.
- You’ll see your new colors appear!!
- My text is hard to read. Fortunately from here I can use the full arsenal of CSS and change font colors, sizes, spacing, etc.
- To change the font color, add the following for each color number you want to change (#ffffff is white, you could use any color you want here as well.)
.ms-acal-color3 div, .ms-acal-color3 div a, .ms-acal-apanel-color3 SPAN {color: #ffffff !important} - Click OK in the task pane to close it. Click Stop Editing in the ribbon to stop page editing.
And here we have it!
You can also modify the default light green item by adding these CSS classes. However, if you do, make sure to put it at the top of your CSS text, also, in my case here, any colors not using a new color scheme, like my pink PTO, will be changed to whatever color you put here.
.ms-acal-item { BORDER: #xxxxxx; BACKGROUND-COLOR: #xxxxxx } .ms-acal-default-hover { BORDER: #xxxxxx; BACKGROUND-COLOR: #xxxxxx } .ms-acal-apanel-item { BORDER: #xxxxxx; BACKGROUND-COLOR: #xxxxxx }
And if you want to change the default font color:
.ms-acal-item div, .ms-acal-item div a, .ms-acal-apanel-item SPAN { color: #xxxxxx !important}
Happy SharePointing!
If you’re still around? I am trying this with the current versions. I don’t see the vernacular Site Actions anywhere. I’m guessing the vernacular has changed. I don’t know SP well enough to translate Site Actions to the current incarnation. Also, is it possible I don’t see this due to not being Administrator? Thank you.
Hi, These options won’t work in the modem SharePoint Online capabilities unfortunately.
HOW DO I STOP THE COLOR FROM CHANGING TO WRITE WHEN HOVERING OVER THE TITLE WITH THE MOUSE
I believe the 2nd CSS object is the hover state, so you can add color to that, like
.ms-acal-selcolor# {
BACKGROUND-COLOR: #xxxxxx;
color: #xxxxxx;
}
Can html placed in a web part modify items on the page? I want to replace the entries created under Calendars in View with spans instead of anchors to kill the links to the overlay calendars.
Well, I found a solution. I added this to the beginning of the CSS in the web part for modifying the colors.
.ms-acal-apanel ul, .ms-acal-apanel li {
padding: 0px;
margin: 0px;
list-style-type: none;
overflow: hidden;
pointer-events: none;
}
The pointer-events: none; eliminates the functionality of the links.
Hi David – I know this is a really old post so I’m hoping you’re still around. I followed your steps using IE on SharePoint Server 2016 and the colors didn’t change. I double-checked to make sure the “;” were where they were supposed to be and that it looked like your from the screenshots. Any ideas?
Yikes, not sure, it’s been too long, and not entirely sure I’ve run this on 2016. It’ll take some debugging to figure out.
I followed your articles and your great answers to my questions when I created calendars for each of our locations but we migrated our email to Microsoft 365 a while back but hadn’t migrated our on-premises Sharepoint site. What I’m hoping to do is migrate our existing Sharepoint site to the default new Sharepoint site on Microsoft 365 using SPMT. Would the Microsoft Sharepoint Migration Tool have any problems with a customized calendar?
I believe that tool only migrates content, I forget if it all carryover custom fields. I’m pretty sure it will not carryover customizations made to the UI
That’s what I was afraid of though I hadn’t been able to find any specific answer.
Hi David,
Thanks for the great article! SharePoint is complex on it’s own and I haven’t found a good way to change the colors.
I tried your way by adding HTML Form Web Part, but when I go in to edit, the source editor button doesn’t work. I’ve tried everything, switching browsers, SPD and inserting it into the Script Editor web part.
Are there any other known ways to edit the css?
Thanks in advance!!
Hmm not sure, that source button should work. Many factors may weigh in here: browser, version of SharePoint, phase of the moon, etc. Unfortunately I don’t know where to go from here with this one :( if you figure it out do let us know!
I see. Many thanks :)
This page is incredibly useful, thank you so much for sharing!
I have one question, is it possible to user a variable, so that if I wanted to change a colour I would only have to modify one value?
Not in standard CSS, you’d need a compiler to work with variables. A find/replace in your editor of choice should work just as well ;)
Where in the love of the Almighty can I find it’s CSS using Sharepoint designer? I already have a color coded overlayed calendar but I want to change it’s default colors.
I wish… This is the only way to effectively change the colors. SPD doesn’t work here.
David, this works great! To change the font color, where do I apply before or after acal-colors?
.ms-acal-item div, .ms-acal-item div a, .ms-acal-apanel-item SPAN
{ color: #FFFFFF !important}
}
lol. never mind. I figured it out. you add it to each one you want to change the font. Thanks David.
David, thanks for the post it helped me. How can I change the font color of the events. Right now they are white and I would like them black.
thanks
Take a look in the article again, there’s CSS there for the font color. Also, search this page for font in your browser and you’ll find other comments around fonts. A few people have figured it out as well. Feel free to email me your CSS david.lozzi at slalom.com and I can take a look.
Thanks, sorry about that, yes if I slow down and read it all, it might help. Works great!!
Ha ha, no problem! Thanks
For some reason I cant get my color legend to match. Any ideas?
What does your CSS look like? You can email me at david.lozzi at slalom.com.
Hi David,
As a few people have mentioned above, I am unable to get the font color on one of the overlays to change from white (the default) to black. I inserted the code below for the font color that I am trying to change. Color 6 is yellow and is displaying with white font and I need black.
.ms-acal-color6{
BACKGROUND-COLOR: #fdfe02
}
.ms-acal-selcolor6{
BACKGROUND-COLOR: #fdfe02
}
.ms-acal-apanel-color6{
BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #fdfe02;
}
.ms-acal-color6 .ms-acal-sdiv, .ms-acal-color6 .ms-acal-sdiv a{ color: #000000 !important
}
.ms-acal-apanel-color6 SPAN{
color: #000000 !important
}
The second line of CSS to change the legend font to black worked fine. I just can’t get the font on the calendar to change to black!
Any ideas?
thanks!
Jeni
I just gave this a try and it worked as expected. One thing to note is taht the .ms-acal-sdiv is for a single day event, use -mdiv for a multi day event if desired.
Hi David,
Having trouble changing a hoving text color to something other than white. Can you help?
Thanks.
Figured it out. It was mentioned in the section above.
.ms-acal-colorX
.ms-acal-sdiv,
.ms-acal-colorX
/* This section changes default item text color */
.ms-acal-sdiv a{ color: #xxxxxx !important
}
/* This section changes default panel item text color */
.ms-acal-apanel-colorX SPAN{ color: #xxxxxx !important
}
Thanks.
David
I’d like to print this calendar overlay in color but I can’t find a way short of a screen capture. Any ideas?
The overlay colors are background colors, and most browsers ignore background colors. you’ll need to tell your browser to also print the background color.
This worked! Thanks!
This worked beautifully for me. I was so surprised as I am NOT a programmer.
Now my new COLORs are too dark for the title color. So, now I need to change the font color of the title. However, what I noticed is that there are 2 colors associated (HOVER color and the TITLE color). I think the hover color of the text is fine but the TITLE color needs to be made darker so I can see it with my new and darker color coding colors.
I saw a post and your reply to use: .ms-acal-color# .ms-acal-title
Would I then do this? .ms-acal-color#000080 .ms-acal-title ?
Where would I insert this code? Would I put it in between and in the current HTML webpart? Would I add a new webpart?
Thank-you in advance!
Helen
Hi Helen,
I’m glad this worked for you!! For the text, you should select the number of the color selection you’re using, like .ms-acal-color1 or .ms-acal-color8, etc. Then use that to set color: #000080 in that class. Something like
.ms-aca-color1 { color: #000080 }
Hi David, love your articles and this one has really helped me. Is there any way to change the leftside Default Calendar legend text ? Its the very first one in the order. I think this is named according to the Calendar list name but I want to change the text in the legend only. Using DOM I can see that the class is called “ms-acal-apanel-item ms-acal-apanel-color”. Not sure how to add the code to do this and would appreciate if you had any advise. Thanks heaps.
This worked great! thank you. can you tell me how I can make the event title bold.
Glad it worked! To change the title you can use .ms-acal-title to change all titles. If you want to change title for a specific color, do .ms-acal-color# .ms-acal-title. Let me know!
So in order to change the title would you need to do this in a separate webpart or do you combine it with the current HTML Code? or put underneath?
I am definitely not a programmer.