In this post I will describe how to highlight different kinds of events in a calendar view using the calendar overlay feature. Later I will show you a way to change the event colors for a calendar without being overlaid. The calendar overlay is a nice feature, the only problem is if a user selects a single calendar from the overlays, the events will always be blue. This can be very confusing, but more on this later.
First let me show you how to use the calendar overlay feature to color-code different kinds of events.
In the Employee Training Management this can be very useful for example to highlight fully booked trainings, so that it’s obvious at a glance when sessions are fully booked.
You can also use it for example if different offices work on the same Employee Training Management site or on the same Calendar E-Mail Extension or any other calendar and you want to use a different color for trainings or events that are only relevant for a certain office.
In this example I just changed the category field of the “Scheduled Training” list in an Employee Training Management site. In the category field you can usually select the type of the event (meeting, work hours, business, holiday …). I changed this field to just select the color of the event. I named them Color 1 to Color 9. With the calendar overlay you can select from exactly 9 different colors.
Then I created 9 different calendar views (Color1 to Color9) and configured the filter of each view to only show events from a certain color.
I also changed the original calendar view to only show events that have no category/color selected.
On this calendar view I added the other 9 calendars as overlays. Here it’s very important to select the correct color for each calendar view.
You can do this by clicking on “Calendar Overlay” in the calendar ribbon or by clicking on “Calendars in View” on the left.
You then have to click on “New Calendar”.
After adding all 9 calendar views it looks like this:
Different kind of events are displayed in a different color. In my case I can choose the color directly in the event. But as I mentioned above you can use for example different offices or locations, free or fully booked or whatever distinction you need.
What I find confusing about calendar overlays is that if you select a category/view from the left navigation, the events in the view are always displayed in the calendar’s default color (usually blue).
For this I found a nice workaround with only one CSS. Depending on the view path I change the color of the events in the calendar. Here is an example:
If you want to copy the CSS, hover over it and click on the view source symbol. You can also download the CSS here.
form[action*='/Color1.aspx'] .ms-acal-item, form[action*='/Color1.aspx'] .ms-acal-apanel-item { background-color: #00485B; } form[action*='/Color2.aspx'] .ms-acal-item, form[action*='/Color2.aspx'] .ms-acal-apanel-item { background-color: #0072C6; } form[action*='/Color3.aspx'] .ms-acal-item, form[action*='/Color3.aspx'] .ms-acal-apanel-item { background-color: #288054; } form[action*='/Color4.aspx'] .ms-acal-item, form[action*='/Color4.aspx'] .ms-acal-apanel-item { background-color: #767956; } form[action*='/Color5.aspx'] .ms-acal-item, form[action*='/Color5.aspx'] .ms-acal-apanel-item { background-color: #ED0033; } form[action*='/Color6.aspx'] .ms-acal-item, form[action*='/Color6.aspx'] .ms-acal-apanel-item { background-color: #682A7A; } form[action*='/Color7.aspx'] .ms-acal-item, form[action*='/Color7.aspx'] .ms-acal-apanel-item { background-color: #006984; } form[action*='/Color8.aspx'] .ms-acal-item, form[action*='/Color8.aspx'] .ms-acal-apanel-item { background-color: #13402A; } form[action*='/Color9.aspx'] .ms-acal-item, form[action*='/Color9.aspx'] .ms-acal-apanel-item{ background-color: #3B3C2B; } form[action*='/Color1.aspx'] .ms-acal-selected { background-color: #009AC3; } form[action*='/Color2.aspx'] .ms-acal-selected { background-color: #005594; } form[action*='/Color3.aspx'] .ms-acal-selected { background-color: #1D603F; } form[action*='/Color4.aspx'] .ms-acal-selected { background-color: #585A40; } form[action*='/Color5.aspx'] .ms-acal-selected { background-color: #B10026; } form[action*='/Color6.aspx'] .ms-acal-selected { background-color: #4E1F5B; } form[action*='/Color7.aspx'] .ms-acal-selected { background-color: #009AC3; } form[action*='/Color8.aspx'] .ms-acal-selected { background-color: #1D603F; } form[action*='/Color9.aspx'] .ms-acal-selected { background-color: #585A40; }
form[action*='/Color1.aspx'] .ms-acal-item,
form[action*='/Color1.aspx'] .ms-acal-apanel-item { background-color: #00485B; }
form[action*='/Color2.aspx'] .ms-acal-item,
form[action*='/Color2.aspx'] .ms-acal-apanel-item { background-color: #0072C6; }
form[action*='/Color3.aspx'] .ms-acal-item,
form[action*='/Color3.aspx'] .ms-acal-apanel-item { background-color: #288054; }
form[action*='/Color4.aspx'] .ms-acal-item,
form[action*='/Color4.aspx'] .ms-acal-apanel-item { background-color: #767956; }
form[action*='/Color5.aspx'] .ms-acal-item,
form[action*='/Color5.aspx'] .ms-acal-apanel-item { background-color: #ED0033; }
form[action*='/Color6.aspx'] .ms-acal-item,
form[action*='/Color6.aspx'] .ms-acal-apanel-item { background-color: #682A7A; }
form[action*='/Color7.aspx'] .ms-acal-item,
form[action*='/Color7.aspx'] .ms-acal-apanel-item { background-color: #006984; }
form[action*='/Color8.aspx'] .ms-acal-item,
form[action*='/Color8.aspx'] .ms-acal-apanel-item { background-color: #13402A; }
form[action*='/Color9.aspx'] .ms-acal-item,
form[action*='/Color9.aspx'] .ms-acal-apanel-item{ background-color: #3B3C2B; }
form[action*='/Color1.aspx'] .ms-acal-selected { background-color: #009AC3; }
form[action*='/Color2.aspx'] .ms-acal-selected { background-color: #005594; }
form[action*='/Color3.aspx'] .ms-acal-selected { background-color: #1D603F; }
form[action*='/Color4.aspx'] .ms-acal-selected { background-color: #585A40; }
form[action*='/Color5.aspx'] .ms-acal-selected { background-color: #B10026; }
form[action*='/Color6.aspx'] .ms-acal-selected { background-color: #4E1F5B; }
form[action*='/Color7.aspx'] .ms-acal-selected { background-color: #009AC3; }
form[action*='/Color8.aspx'] .ms-acal-selected { background-color: #1D603F; }
form[action*='/Color9.aspx'] .ms-acal-selected { background-color: #585A40; }
The action attribute in the form tag contains the current URL:
<form action=’~site/lists/calendar/view.aspx’ …
The URL of the views I created before always ends with Color[i].aspx. In this example I used the contains (*=) CSS selector, so that it also works with an appended query string. To be more specific you can also use the server relative URL of the view and use the start with selector (^=).
The colors I use in this example are used in the SharePoint 2013 default theme, if you changed the theme or if you use SharePoint 2010 you have to change the colors.
The colors in the first section are the background colors of unselected events and the list name in the left navigation.
ms-acal-item: event in a calendar
ms-acal-apanel-item: Calendars in View in the left navigation
The colors in the second section are the colors if an event is selected.
ms-acal-selected: selected event in a calendar
If you need a trial for the Employee Training Management or the Calendar with email extension, click on “Download Trial” on the product page. The trial version is fully functional and valid for 30 days.
