Another way to have more than 7 colours on a SharePoint Calendar – and no overlays.

It happens every few clients…
Client: We want multiple colours on our calendars!
Me: Sure, you do it with views and overlays. But you can only have 7 usable colours and you will be confused navigating.
Client: Do we have to?
Me: I’m sorry, it is a limitation of SharePoint. Perhaps you could try a third party solution?
Client: *Sigh* we can’t spend any more money since we gave the last of our gold to the handsom SharePoint consultant. We *sniff* must carry on regardless.
Me: Ok.

Not any more!!!!!
I’ve compiled a nice collection of javascripts from the internets that finally give a good user experience, with as many colours as they want.

Here’s what you do.

1.    Create a calendar.
2.    Add the field you want to colour by ( in this case ‘Resource Name’ ) to the Month View Title, Week View Title and the Day View Title of the view.

Change your View to match the field you want to separate your colours with

Change your View to match the field you want to separate your colours with

3.    Add a new Content Editor Web Part, link to the js below and make the web part hidden.
4.    Edit the js. Change the first parameter in ‘AddRowToTable’ to what ever you want to separate the colours by. In this case a user field ‘Resource Name’ but it could be anything.
5.    Done.

SharePoint Calendar with colours

SharePoint Calendar with colours. And no overlays

Link: resource_colour_all_events – colour calendars.js


/* Hide the overlays navigation in the quick launch. Not needed, but it looks better without this */


function colorCalendarEventLinks()

/*Add the different elements. The first parameter is what to search for in the title, the second is the hex colour     */


function AddRowToTable(title,colour)
var events = jQuery(‘div[title*=”‘ + title +'”]’);
events.css({“background-color”:”#” + colour  +””});


/* Adds colorCalendarEventLinks to the event that runs when the calendar is refreshing */
function WaitForCalendarToLoad() {

if (typeof SP.UI.ApplicationPages.CalendarNotify.$4a == ‘undefined’) {
// post SP1
var pwold$4b = SP.UI.ApplicationPages.CalendarNotify.$4b;
SP.UI.ApplicationPages.CalendarNotify.$4b = function () {

else {
// pre SP1
var pwold$4a = SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function () {

//Expand All Items – if you don’t want this, then comment out
SP.UI.ApplicationPages.SummaryItemRenderer.prototype.$2u = function ()
ULSvSp: ;
if (!this.$1A_1) this.$1A_1 = 100;
return this.$1A_1

SP.UI.ApplicationPages.CalendarViewBase.prototype.resetSelection = function () {
if (SP.UI.ApplicationPages.CalendarViewBase.prototype.$4u_1) {