Adding color (colour) to calendar events

Recently I was asked by the client to colour their calendar events based on some criteria.

For instance you have an event and you would like to specify the color of that event in a calendar depending on some category.

In this case you have an option of either purchasing widely known Calendar Plus Webpart from bamboo solution or following this article …

Well, first you should create that category column and give it a “choice type” so that when users create new event they can specify whether this is “Urgent, Low priority” or whatever categories you might need.

Secondly, once you have all of those events with choice provided you need to create another column that will contain the title of your event for example and an identifier for a category.

For example I will create a calculated column called EventTypeTitle and place the following formula: =EventType & “|||” & Title

so in here I have my Event Type column which users wil pick the type of the event and a title column. Both of those are merged into one and separated by this sophisticated separator you see there |||

Next …. someone, help me stay awake …

Next, you need to go into your calendar view and pick EventTypeTitle (in this screenshot it’s called StatusTitle) but essentially this is the same column that contains both Title and the Event Type:

So once we have that we need to do one last step …

 we need to place a javascript that handles all the coloring to the page … but ask me how i’m going to execute all that javascript – I will tell you – content editor webpart .. yes yes yes .. this is the webpart that will display text or code on the screen and in our case it will be javascript code that will display nothing but alter the view our calendar …

how?

Since we specified for our calendar to use both EventType and Title as the title of the event .. every event will identify it’s Type and title and be separated by |||

So …

Our javascript will capture those separated values and delete the type and display the title only.

Here is that fancy javascript written by some other smart guy: http://theregime.wordpress.com/2007/11/28/adding-color-to-sharepoint-2007-calendar-moss/
<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 “appointment”:

       colour = “#ffd266″;
       break;
    case “birthday”:

       colour = “#ae99dc”;
       break;
    case “business”:

       colour = “#8aabe0″;
       break;
    case “important”:

       colour = “#e77379″;
       break;
    case “vacation”:

       colour = “#fffa91″;
       break;
    default:
       colour = “”;
 }

 return colour;
}

</script>

So once you add this stuff to your content editor webpart – you must place your content editor webpart below your calendar view.

Dat’s it …

 oh yeah .. please don’t forget to specify your own value in GetCalendarColour javascript function .. you can also specify your own color values too … the value have to be lowercase (because switch statement works that way in our case) and those will be equal to whatever your user is permitted to select as a Event Type.

 OK … Cheers!!