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 color 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 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>")
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 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 bascially creates the HTML that needs to get translated from displayed code to executed code.
var theTags = document.getElementsByTagName("A");
while (i < theTags.length)
TagContent = theTags[i].innerText || theTags[i].textContent;
if (TagContent.indexOf("<tag>") >= 0)
theTags[i].innerHTML = TagContent;
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.