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!

201 thoughts on “Customize the SharePoint Calendar Colors

Add yours

  1. I encountered a strange behaviour when adding the CSS via some web part before the calendar. My colours looked fine while editing the page but returned to something else when viewed normally. I have to use the IE8 (sic) but managed to work around this thing.
    I just had to place another web part (even hidden works) before the CSS injector. Any list did it.
    Thanks a lot for your detailled posts.

  2. Hi there. I used the code that you had and it worked perfectly in the calendar page. My issue is that I have the calendar embedded on the homepage and I would like for the color code to be the same. Unfortunately it says that the web part change won’t be applied to the homepage. Do you know of a work around for that?

    Thanks!

  3. Greetings, Thank you for this great tool.

    In addition to what you provided; I also add the ability for the calendars to expand to show all events automatically and each calendar that feeds the overlays have had their colors adjusted to match.
    Similar to GovGirl (25Mar13) I am using the calendars to manage 16 individual conference rooms. We have small 4 person rooms that are grouped by floor and larger meeting rooms that are also grouped by floor. I have two rooms (classroom and a privacy room) that stand alone but have included them in the color sequence.
    And your tip makes a huge difference in how things look (much better then the out of the box colors).
    My problem now is that as soon as I set the calendar for Resource Reservations I lose all events and am unable to scroll the page. As soon as I change the settings back the items appear.

    Any thoughts of where I should look to fix this?

  4. Hi, is there a way to change these colours for Calendar overlays in SharePoint Online? I am desperate! thank you.

  5. Hi David,

    Thank you heaps for your brilliant article, and for patiently replying to everyone.
    I’ve come across two issues, the first I resolved, where I was getting the …” Can’t retrieve any properties at this time” when using the HTML Web Form web part. I tried the Script Editor web Part instead and it worked correctly. What I have found with the ledger is, if I select one of the options on the left, it displays the events in the correct view/category but it returns to the default colour of the site theme (pink). Any ideas on how I can retain the same colours used in the default view?

    Thanks

  6. Has anyone figured out how to get more than 9 colors? How about font changes/colors in combination? Any thoughts would be welcomed.

    1. Haven’t been able to get past the 9 colors, unfortunately. You should be able to change the fonts in the same manner, using font-family: css properties.

  7. Hi David , i followed every step you described up till the part where i needed to save the web part. For some reason i kept getting a dialog box saying ” Can’t retrieve any properties at this time” followed by another that says my changes cannot be saved. My calendar has 8 views

    1. this was what i typed into the web part, i only needed to change one color

      .ms-acal-color7 {
      BACKGROUND-COLOR: #BC8F8F
      }
      .ms-acal-selcolor7 {
      BACKGROUND-COLOR: #BC8F8F
      }
      .ms-acal-apanel-color7 {
      BORDER-COLOR: #BC8F8F;
      BACKGROUND-COLOR: #BC8F8F;
      }

    2. I’ve seen this before. I think it has to do with your browser. Try editing the page and add any Web part and save. You should get the same error. What browser are you using?

              1. I just did, it works fine for content editor. Even with/without anything in it, the web part saves in IE, Chrome even Mozilla

              2. Could you email me a screen shot of the error you’re getting? Send it to david.lozzi at slalom.com. We can take troubleshooting offline. Thanks!

  8. Hi David –
    Is there anyway to modify a Task List’s calendar view? Just one calendar view and color code the entries based on which Department the task was created for?

    Thanks

    Joe

      1. We are only using one Task List. Not multiple list for each department. We do capture the department info for each item. I thought we might be able to color code each item based on department name.

          1. I realize what you mean.

            Although our Production server has not been updated and the filtering of the Calendar View does not work for the Task list.

            It does work in our Integration environment which was just recently patched.

            Thanks

            Joe Monteleone
            Senior Developer
            P: 617.946.8695
            jmonteleone@coverys.com

            One Financial Center
            P.O. Box 55178
            Boston, MA 02205-5178
            http://www.coverys.com
            Toll Free: 800.225.6168

  9. I have a tottally different issue. Two of my overlay calendars have the same color #

  10. Hi David, thanks for your helpful post. I have implemented the colour overlays and they work fine. I have one problem; the ‘Calendars in View’ key on the left doesn’t show the correct colours, they are all the same. Is there a way to get the menu to match the actual overlays? Many thanks…

    1. Double check your CSS. There should be 3 CSS attributes per color, one of which is for the left legend. If you want, email me your CSS and I’ll give it a try. David.lozzi at Slalom.com

      1. Thanks David. As I am using SP on a corporate site I will check with the IT guys to make sure the CSS is being correctly saved and not over-written.

  11. Hi David, I have added your code into the SharePoint site and for whatever reason, whenever i hit save, it will not save the changes. is there something that I am missing?

    1. You’re hitting save on the page ribbon I assume? Is it erroring out? Have you tried editing the page and just save it without the code just to rule out bugs from my stuff ;)?

  12. I want to add, the font color changed to black in the legend, yet on the calendar it is still white on yellow background. Very hard to read. Many thanks in advance.

  13. Hi, David,

    I can’t change the font color to black, any idea why?

    .ms-acal-color1 .ms-acal-sdiv, .ms-acal-color1 .ms-acal-sdiv a{
    color: #000000 !important
    }
    .ms-acal-apanel-color1 SPAN{
    color: #000000 !important
    }

    .ms-acal-color1{
    BACKGROUND-COLOR: #0000FF
    }
    .ms-acal-selcolor1{
    BACKGROUND-COLOR: #0000FF
    }
    .ms-acal-apanel-color1{
    BORDER-COLOR: #ffffff ; BACKGROUND-COLOR: #0000FF;
    }

    1. I was able to get this to work on the first attempt. Can you email me a screen shot of what you’re seeing exactly? Email to david.lozzi at slalom.com.
      Thanks!

      1. The problem has been fixed by adding:
        .ms-acal-sdiv a, .ms-acal-mdiv a, .ms-acal-ddiv a {
        color: #000000 !important
        }
        I am running SharePoint 2013, and I use Content Editor webpart to call the css file.
        Thanks again for the helpful info.

  14. Thanks for this post. I was able to successfully modify the colors of my calendar overlays. The one issue I’m still having is using your last bit of code to modify the default calendar color. When an individual calendar overlay is clicked (opening a new calendar without overlays), the color changes back to the default color. I’m trying to change this default color within each overlay to match the color I chose on my main calendar with all overlays applied.

    The issue I’m having is that when I use the below code, I’m not getting any boarders to show up around my calendar events:

    .ms-acal-item {
    BORDER: #000000; BACKGROUND-COLOR: #B1DBFF;
    }
    .ms-acal-default-hover {
    BORDER: #000000; BACKGROUND-COLOR: #B1DBFF;
    }
    .ms-acal-apanel-item {
    BORDER: #000000; BACKGROUND-COLOR: #B1DBFF;
    }

    Is there anything I’m missing or doing wrong that you can see?

    Thanks!

    1. Try adding solid 1px to the BORDER property, like:

      .ms-acal-color1{ BACKGROUND-COLOR: #0079C1; BORDER: #F00 solid 1px }
      .ms-acal-selcolor1{ BACKGROUND-COLOR: #0079C1; BORDER: #F00 solid 1px }
      .ms-acal-apanel-color1{ BORDER-COLOR: #F00; BACKGROUND-COLOR: #0079C1;}

Leave a Reply to Haz Cancel reply

Powered by WordPress.com.

Up ↑

%d bloggers like this: