SharePoint 2007 colour (color) calendar

ATTENTION!


This article has been superceded by an updated deployable version which be found here.

The in-built calendar view is SharePoint 2007 is a heck of a lot better than the one in 2003 but it still lacks a feature requested by many customers - the ability to colour (or color for our US friends) code the entries like you can in Outlook.

I had previously created a coloured calendar in 2003 and started to investigate how this might be achieved in 2007. Whilst there are commercial alternatives avilable, the licencing models can be cumbersome - tied to a physical machine etc which make development and deployment a pain.

(Update: if you want to know about the 2003 version, click here)

In SharePoint 2003 the calendar was rendered entirely using Javascript so it was a question of modifying the schema.xml file for the list to output the relevant parameters and then overiding an ows.js function to ensure the colours got rendered. However in 2007 the calendar view is generated from code, specifically a bunch if classes like SPListView, SPCalendarView etc. Lots of this class heirarchy is marked as sealed or internal so it is not easy to try to inherit and change the behaviour. Plus lots of the code is obfuscated too.

As an alternative approach I began to look at perhaps manipulating the calendar in Javascript once it had been delivered to the browser (thanks to Todd Bleeker for inspiration here)

First of all I created a standard SharePoint Calendar list. Then I added a Choice column called Category and put the following values in the choice field.

Appointment
Birthday
Business
Important
Vacation




Secondly I created a calculated column called CatTitle set to the following formula as seen in the image,

=Category & "|||" & Title

You could make these site columns if you wish to re-use elsewhere.



Finally change the calendar view on the list so that the display field for each of day/week/month view is the CatTitle field.



Now we need to insert some javascript to edit the titles so that they category and pipes are removed and the entries are coloured in. Edit the calendar page (Site Actions -> Edit Page) and insert a content editor web part UNDER the calendar list view. Paste the following javasript into the source view. Make the web part hidden.

<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>

You should now have a coloured calendar! Month, week and day views should appear coloured. Remember that if you place a calendar web part on a site that you will need a hidden content editor web part containing the javascript as well.



If you want to change the categories and colours, then simply add or change entries in the choice column and change the function in the Javascript accordingly.

In an ideal world this would be some sort of deployable feature, perhaps custom list definition. I will have a look at doing this at some point if I get time....