Tuesday, October 20, 2009

Coloring Events in SharePoint calendar

Hi All,

We all are familiar with coloring events in Outlook calendar. Question is can we have the same deal with SharePoint calendar and the answer is yes we can have. In this article, I am going to share few tips on how to achieve this functionality.

To achieve this, first create one field in Calendar list. For example, give it a name “Category”. Your each event is divided in some category. Give it as choice column and enter following categories for selection choice.

So, your each event is divided in these two categories. So now, go ahead and add two entries in calendar. One of Sports and other is of important meeting category.

Also create one more calculated column called “CatTitle”

And change the calendar view to this

And now we will add one content editor web part below calendar web part. So Edit the page and add one content editor web part and add the following line of code. This will color the different events.


var SEPARATOR = "|||";

var nodes, category;

nodes = document.getElementsByTagName("a");

for(var i = 0; i < nodes.length; i++)

if(nodes[i].innerText.indexOf(SEPARATOR) != -1)


var foundNode = nodes[i];
var trap = 0;

while(foundNode.nodeName.toLowerCase() != "td")
foundNode = foundNode.parentNode;

if(trap > 10)
break; // don't want to end up in a loop


var colour = GetCalendarColour(category);

if(colour != "")

foundNode.style.background = colour;

function UpdateCalendarEntryText(anchorNode)

var children = anchorNode.childNodes;
for(var i = 0; i < children.length; i++)

if(children[i].nodeType == 3 && children[i].nodeValue.indexOf(SEPARATOR) != -1)
var parts = children[i].nodeValue.split(SEPARATOR);

category = parts[0];
children[i].nodeValue = parts[1];


function GetCalendarColour(desc)

var colour;


case "sports event":
colour = "#3399FF";

case "important meeting":
colour = "#FF33FF";

colour = "";

return colour;



I would like to thank Mark Wilson for this wonderful trick.

That's it. your job is done.

Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com