SharePoint Calendar Colourification

One of the ways we use SharePoint is to track events and their status, "Completed", "Pending", or "Rescheduled". It's a pretty common use of SharePoint and depending on how it's put into practice you can simply filter out events that you don't want to see. For example, if you wanted to see only the events that were "Pending" displayed on a calendar, you simply had to filter out events that "do not contain" = "Pending" and presto!

Here's where it gets (got) challenging: The users of this system wanted to display all events, regardless of status, but wanted them colour coded based on their status. Sounds easy enough, but SharePoint doesn't provide a way to do it so I had to figure it out.
After pounding on Google for about an hour and following links to pages that were asking me to pay for a solution that "might" be what I was looking for, I was about to call it quits and tell them that we'll just have to have separate calendars for each status. Then I found that tiny gold nugget I was looking for!
This site described how to include dynamic HTML code into a calculated column. In itself that's not a challenging task, the problem is that SharePoint displays the HTML in the calculated column as text and doesn't execute it as a part of the page. Thankfully, that same page described how to translate displayed HTML into executed HTML using a bit of JavaScript called "innerText" and "innerHTML".

This was a great breakthrough, except that it only applied to the list view, not the calendar view. I decided that it was time to dust off my old dev skills and hack the code up to make it do what I wanted it to do and here's what I came up with.

Calculated Column code: (cleaned up on 14 November 2008)
=CONCATENATE(" <nobr title='",[Status],": ",[Short Description],"' style='font-weight:lighter;color:",IF(ISERROR(SEARCH("Completed",Status,1)),(IF(ISERROR(SEARCH("Pending",Status,1)),(IF(ISERROR(SEARCH("Rescheduled",Status,1)),,"blue")),"red")),"green"),"'> #",[Title],"</nobr><tag>")
Yes, I know it looks like a lot of garble-dy-gook and I'm sorry for that.

Everything you see that is between the square brackets is a column from my list that I want to use in building the HTML. You'll need to change these to match your list.
The most confusing part of this is easily the "IF(ISERROR(..." block. I'll try to clear that up here using standard code formatting instead of the single line of text. The core functionality revolves around this line:

IF(ISERROR(SEARCH("variable", [Column],1)), false, true)

The "variable" - the value you're trying to find. [Column] - the column that you're looking in. false - what to do if the "variable" isn't found in the [Column]. This can be an output string or more code. true - what to do if the "variable" is found.
If you're like me, you may need a bit of a visual clue to help understand this:

 

SharePoint makes you put it all in one line like Excel. It basically creates the HTML that needs to get translated from displayed code to executed code.
This part is where the magic happens. The original JavaScript code was designed to work on the List view in SharePoint, but I needed it to work on the Calendar view. Here's the code I used: (updated 14 November 2008)
<script type="text/javascript">
var theTags = document.getElementsByTagName("A");
var i=0;
while (i < theTags.length)
{
try
{
TagContent = theTags[i].innerText || theTags[i].textContent;
if (TagContent.indexOf("<tag>") >= 0)
{
theTags[i].innerHTML = TagContent;
}
}
catch(err){}
i=i+1;
}
</script>
This bit of JavaScript is placed into a Content Editor Web Part and placed below the Calendar.
Freely I have received this code, and freely I give it away. If you'd like help hacking this up to make it work on your SharePoint site just drop me an email and I'll help where I can.