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.

<script>

var SEPARATOR = "|||";

var nodes, category;

nodes = document.getElementsByTagName("a");


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

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



UpdateCalendarEntryText(nodes[i]);


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

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

trap++;
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];
}

else
UpdateCalendarEntryText(children[i]);
}
}

function GetCalendarColour(desc)
{

var colour;

switch(desc.toLowerCase())
{

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

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


default:
colour = "";
}

return colour;

}

</script>

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

That's it. your job is done.