A really useful feature of Microsoft SharePoint 2013 is the ability to create calendar overlays (where you combine a number of calendars into one) which are colour coded in order to differentiate between each calendar represented in the collated view.

One downfall of this function is that, although standard colour themes are provided out of the box, these colours can be very close in shade thus making it difficult to quickly identify which items are associated with each colour, like in this example.

Luckily, there is a relatively simple way to overcome this.

To start with, you will want to find which colours you would like to use for your calendar and note down the hex code for each colour. These can readily be found on line, one site you may want to try is:http://www.w3schools.com/tags/ref_colorpicker.asp

Give some thought to your colour scheme, you may want to use brand specific colours and you will also want to ensure that the colours are user friendly. For this example I will use the following colours:

Light Blue#66CCFFTurquoise#00E6B8Pink#FF0066Lemon#FFFF66Lime#99FF33


To apply our own colours all we need to do is use a little CSS:

.ms-acal-color# {BACKGROUND-COLOR: #xxxxxx}.ms-acal-selcolor# {BACKGROUND-COLOR: #xxxxxx}.ms-acal-apanel-color# {BRODER-COLOR: #xxxxxx; BACKGROUND-COLOR: #xxxxxx}

The first line applies to the colour of the item when you load the page, the second applies to the colour when a user hovers over it and the third is the colour that will appear in the calendar key within the panel on the left hand side of the page.

# has been used as a placeholder you should replace the # after the ms-acal item with the order number of your overlay and the second with the hex code of the colour you wish to use.

One thing to note is that SharePoint allows for only a maximum of 10 overlays. The host calendar is item 0, therefore you can change the colour for items 0 through to 9. You can simply copy and paste the CSS provided above as many times as required and replace the placeholders.

So for this example we will be applying the following CSS:

<style type=”text/css”> .ms-acal-color0 {BACKGROUND-COLOR: #66CCFF}.ms-acal-selcolor0 {BACKGROUND-COLOR: #66CCFF}.ms-acal-apanel-color0 {BRODER-COLOR: #66CCFF; BACKGROUND-COLOR: #66CCFF} .ms-acal-color1 {BACKGROUND-COLOR: #00E6B8}.ms-acal-selcolor1 {BACKGROUND-COLOR: #00E6B8}.ms-acal-apanel-color1 {BRODER-COLOR: #00E6B8; BACKGROUND-COLOR: #00E6B8} .ms-acal-color2 {BACKGROUND-COLOR: #FF0066}.ms-acal-selcolor2 {BACKGROUND-COLOR: #FF0066}.ms-acal-apanel-color2 {BRODER-COLOR: #FF0066; BACKGROUND-COLOR: #FF0066}   .ms-acal-color3 {BACKGROUND-COLOR: #FFFF66}.ms-acal-selcolor3 {BACKGROUND-COLOR: #FFFF66}.ms-acal-apanel-color3 {BRODER-COLOR: #FFFF66; BACKGROUND-COLOR: #FFFF66} .ms-acal-color4 {BACKGROUND-COLOR: #99FF33}.ms-acal-selcolor4 {BACKGROUND-COLOR: #99FF33}.ms-acal-apanel-color4 {BRODER-COLOR: #99FF33; BACKGROUND-COLOR: #99FF33} </style> Now that we have our CSS the next step is to insert this to our calendar page.


1. Open your calendar, click on the cog and select Edit Page

2. Click on the Add a Web Part link

3. From the Categories header scroll down and select Media and Content, this will refresh the Parts header, from this section select Script Editor and click Add

4. Within the Script Editor Web Part, to the far right hand side, click EDIT SNIPPET

5. Copy the entire CSS exert as provided above and paste within the free text area and click Insert

6. In the ribbon under the page tab click stop editing

And from following this method you will now have a colour coded calendar with easily distinguishable colours similar to the image below.

Contact the Evoke IT team to find out what else we can do for your SharePoint!


Get Up To Speed With SharePoint 2019!

Download Our FREE eBook...


Download SharePoint 2019 eBook