Customize the SharePoint Calendar Colors

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:

Light Yellow, #fef8d6, Color #1
Light Green, #d0ffbc, Color #2
Orange, #feebcd, Color #3
Light Turquoise, #c8f0ff, Color #4
Pink, #ffc8e8, Color #5
Light Blue, #bee5ff, Color #6
Ice Blue, #e0e8f2, Color #7
Ice Blue, #d9dde1, Color #8
White, #f2f2f2, Color #9

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:

Source: CreativeColor Schemes

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!

195 thoughts on “Customize the SharePoint Calendar Colors

Add yours

  1. Hi David,

    First off, this was a very informative post, so thank you for putting it together.

    Second, have you found any resolution for the disappearing ribbon with calendar overlays?

    Thanks for any help you can pass along.

  2. Hi David,

    I have a calendar that’s having two views with green and purple color. the problem is when i click the overlay calendars link the title is not changing.

    Corporate
    SA
    VIC

    so when i click the SA link the calendar is showing the events in SA link but still showing the title as Corporate not SA.

    thanks

    1. Hi Jessica. The color numbers as noted above directly correlate to the colors selected from the picker. It doesn’t matter what order the calendars are in, it relates to the value selected for the color.

  3. David,
    I have a requirement to add 10 calendars in overlay calendar – which i was able to do.
    Now if we can add 10 calendars, why do we have just 9 colors available ?
    Can I add 10th color in my custom css file ? even if i add i will not be able to add it to any calendar.

      1. This is weird. You can add 10 calendars but only have 9 colors. Unfortunately the CSS and color is related to the selected color, not the calendar itself. So calendar layer 6 can use color #2.

  4. Thanks a lot for your instructions, which I followed and it works fine… the only thing now is that I would like to see the same color scheme used when I edit the calenders in the Overlay settings. Here still the original colors are displayed. How can I make them match?

  5. Thanks so much for the instructions. Unfortunately, this only changed the colors on the left side (list of “Calendars in View”) without changing the colors on the actual calendar itself. Could you provide some assistance? Thank you!

  6. Please can you point me in the direction of a good guide for SharePoint scripting – I have created the colour coding (thank you) but don’t know where to start adding this script to stop the new window :-)

    1. I haven’t tried, and I’m assuming you did, and it didn’t work? Unfortunately the Save as Template is pretty basic, I doubt there’s an easy out of the box way to save the layering.

  7. .ms-acal-color1{
    BACKGROUND-COLOR: #9F3
    }
    .ms-acal-selcolor1{
    BACKGROUND-COLOR: #9F3
    }
    .ms-acal-apanel-color1{
    BORDER-COLOR: #9F3; BACKGROUND-COLOR: #9F3;
    }
    .ms-acal-color2{
    BACKGROUND-COLOR: #00AEEF
    }
    .ms-acal-selcolor2{
    BACKGROUND-COLOR: #00AEEF
    }
    .ms-acal-apanel-color2{
    BORDER-COLOR: #00AEEF; BACKGROUND-COLOR: #00AEEF;
    }
    .ms-acal-color8{
    BACKGROUND-COLOR: #Hd266
    }
    .ms-acal-selcolor8{
    BACKGROUND-COLOR: #Hd266
    }
    .ms-acal-apanel-color8{
    BORDER-COLOR: #Hd266; BACKGROUND-COLOR: #Hd266;
    }

    When I want to save this in the quell-editor-window there pops up two error
    messages saying that “currently no properties can be accessed” and that “the modifications cannot be saved”.

    Any ideas? :(

    btw: thanks so far for the great article!

        1. This works well on SP2013 as well. I think you’re using the HTML Forms web part, which I have had the same issues with. Try the content editor web part (or visa versa).

  8. I don’t know if its just my environment but when you add a HTML Form Web Part or a Content editor web part to the main calendar page, the page no longer has the calendar tools at the top or even the ability to change the calendar view in the breadcrumb. To bring up the calendar tools, all I need to do is click on the calendar. Previously, it would just show up when the page loaded by default. I’m really concerned about the “view arrow” disappearing in the breadcrumb to change the view. Is this happening for you?

    Otherwise, your calendar coloring techniques/coding worked perfectly for me.

    Thank You

    1. Hi James,

      I’m not sure, I have had, and others reported it as well, that you do have to click on the calendar to get the ribbon to appear. Not sure about the view switcher. I’ll have to check it out.

      Thanks,
      David

  9. David,

    I’ve customized my calendar using the example in your blog post. It looks wonderful. Thank you!

    Now I’m wondering if there’s a way to display my color-coded calendar on my site’s home page. When I add the calendar to my home page, it displays in the default “blah” colors and when I add the CSS web part to the page, it changes the colors but calendar items aren’t categorized so as a result, they don’t display properly. In other words, is it possible to add the calendar (along with its views and overlays) to a site’s home page?

    Thanks,

    Rina

  10. Hi David,

    Any ideas on how I could go about changing the color of the calendar itself? So the background color of the number of the day of the month.

  11. David, Thanks for helping so many of us with this issue. I’m having a problem that occurs after I click the Source Editor button, paste in my CSS code, and then click Save. After that the color changes do appear in the legend on the left of the calendar, but the actual calendar disappears (the boxes with the days of the month, etc.) Also my ability to access any other controls on the page goes away. All of the buttons and menu choices are unresponsive (including the Stop Editing button, all other controls at the top of the page, the drop down menu to get to the Source Editor, etc). Do you think my CSS is invalid? I basically did a copy and paste from your example with the only changes being the color numbers.

  12. David,
    I have the same problem with my calendar. But if I click somewhere within the calendar or just above the ribbon appears. I was just told this was a drawback of using overlays. Is that not correct?

    1. Hi Tammy,
      You are correct I just tried this myself, thanks for the tip. David I have sent you my CSS, lets see if you can duplicate it or find the error.

      Cheers
      Josh

  13. Hi David,
    Thanks heaps for your work on calendar views and customising colours. One thing that I have noticed is that I no longer have the calendar tools ribbon at the top of the master view. It is available on each overlay view however. Is there a way to have that back?

    Cheers

    Josh

      1. Hi David,
        In the default view no it still does not display. I can select an individual calendar view and it displays as normal

        1. Hi Josh,

          Can you email me your CSS? I’ll give it a try on my end and go from there. My email is david.lozzi at slalom.com. Thanks,
          David

  14. Hi David. Very interesting! But what if I wanted to change the vertical lines running through the calendar to be different from the background of the inside calendar…I’ve changed just about every other color BUT this border-color. – rootdiv to vcont to ms-acal-header. I apologize if this is too off-topic! I enjoy your site.

  15. Hi David – This was super helpful! My question is, how do I get the legend to show up on each individual view if you click through from the Calendar Overlay?

    1. Hi Jennifer,

      I’m glad my post was helpful. Unfortunately the overlay feature is not ‘movable’, you have to manually configure it per page you want to use it on. It’s rather annoying if you have lots of pages and views. HTH

    2. I lied, it is movable. Well, what you need to do first is create the overlays on the list’s view, not in a web part, but navigate to the list and add overlays there. Then, when you add a web part, you can modify it to select a view, select that view with the overlays and that should carry over the same settings. You will need to reapply the color changing CSS to the new page however. HTH

      1. Oh my goodness, my brain hurts! I think I need to draw an org chart to help me keep it all straight! Thanks for looking into this. I’ll try to play around with that tomorrow.

          1. I’m agreeing with Jennifer. My brain hurts. So I ended up finding a js for color calendars that have the ability to select and deselect overlays on the calendar page. My problem is the html (css) that we came up with for my calendar (no longer works for my web part on the main page) Any ideas?

            1. Hi Tammy,

              I’m not sure what the JS script does to the calendars, and why the CSS isn’t working anymore. I’m assuming this is on the same page as the JS script? Can you point me to the JS you’re using?

  16. Hi David!
    I found your site to be very helpful. I’ve been working on Conference Room Availability page that contains 6 individual conference room calendars (they are shown in a small scale on the right side of the screen) and then on the left side of the screen (the larger portion of the screen) I have the main calendar showing all of the reservations (an overlay calendar). Anyway I created the 6 individual calendars, the overlay calendar and applied the colors with no problems (thanks to your wonderful post). But I do have an issue where the colors from the 6 individual calendars are not coming through on their webparts on the Conference Room Availability page, however, if I click on the individual calendar I can see the colors on the actual calendar page. Now I went in to the webparts on each of them and made sure the view was set to Calendar, but that didn’t work. Am I overlooking something??? Any help would be really appreciated!!!

    1. Hi,

      I’m glad my post has been helpful. I’m not sure what you’re looking at exactly. Could you send me a screen shot of the page? That may help clear things up. You can email me at david.lozzi at slalom.com. Thanks.

Leave a Reply

Powered by WordPress.com.

Up ↑

%d bloggers like this: