Some time ago a client hired us to build a custom web part that, among other things, would color code events based on a category assigned to an event, embed an “information” link into each date of a 30 day calendar view and provide a printable view for a specific month. At the time, SharePoint 2007 was relatively new, as an organization Consejo had been building custom extensions for SharePoint 2003 for some time and it just made sense to continue down the path of a custom web part. Interestingly, the task of build a custom calendar web part that would properly display events in an event list is harder than you might think (another story).
First, I would always recommend trying to buy before building; as a developer it’s tempting to build, but usually less expensive long-term to buy. And, while there were at least one or two commercial web part options that provided color coding (Bamboo’s calendar plus web part was something we seriously considered), nothing gave our client the ability to embed their information link. The goal for this link was to create a “light” integration between the SharePoint event calendar (where they posted all of their corporate events) and a 3rd party application that would display information related to catering for that date. Essentially, when you clicked the information link, a new browser window opened to the URL of the event application with the date associated with the specific icon the user clicked. Pretty simple and easy.
After a far-too-long development cycle to complete, the web part has been generally working within that client’s environment for some time. However, they recently approached us for an update. The request kicked off another round of investigation and an epiphany of sorts.
Insert the event icon script
Written by Consejo, Inc.
var iterator = document.getElementsByTagName("td");
var i = 0;
while (i<=iterator.length - 1 && iterator.length > 0)
thisNode = iterator[i];
var moreNodes = thisNode.getElementsByTagName("div")
if(moreNodes != null && moreNodes.length > 0)
for( var x = 0; x < thisNode.attributes.length; x++ )
if( thisNode.attributes[x].nodeName.toLowerCase() == 'class' && (thisNode.attributes[x].nodeValue.toLowerCase() =='ms-cal-topday' || thisNode.attributes[x].nodeValue.toLowerCase() =='ms-cal-topday-today'))
var onClickEvent = thisNode.getAttributeNode('onclick').nodeValue;
var origEventDate = onClickEvent.substring(16,37);
var cleanUp = new RegExp(/^([1-9]|1)+\\u002f+([1-9]|[0-9]|3)+\\u002f+\d\d\d\d/);
var cleanEventDate = cleanUp.exec(origEventDate);
cleanEventDate = cleanEventDate.replace(/\\u002f/g,"-");
moreNodes.innerHTML += "<a href=\"http://www.videodetective.com/dvdcalendar.aspx?week=\"" + cleanEventDate + " style=\"font-size:8px;position:relative;right:-45%;\">Event Info</a>";
alert( 'Error: ' + e );
The link in the script is to a site that shows what DVDs were released on the date extracted from the SharePoint calendar’s onClick event; a little regular expression work helps to extract the value provided by SharePoint. Obviously, you should change the URL in the script to something that meets your needs, unless you really want to know what DVDs are to be released.
I very much want to thank both Mark and Christophe for demonstrating a very light-weight approach to adding new functionality to the SharePoint interface. Next time, I’ll think twice about writing mountains of C# when trying to achieve a client’s goals.