Inserting Arbitrary Links in a SharePoint Calendar

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.

While attending SharePoint Summit 2010 in Montreal, I had the good fortune of attending Mark Miller’s (End User SharePoint) session on enhancing the SharePoint interface through jQuery.  Coincidentally enough, very little of Mark’s talk was about jQuery specifically, though he did share a few examples.  What he did show were numerous ways that you could manipulate the standard SharePoint interface using other JavaScript bits, including color coding a calendar, creating a printable interface and creating a tabbed interface.  Many of these scripts were developed by Christophe Humbert from Path to SharePoint.

After attending the session, trying the color coding script myself (really a combination of a calculated column and JavaScript) and seeing the possibilities, I decided to try my hand at recreating the custom web part we developed using just JavaScript and calculated columns.  While Christophe’s approach helped with the print view and the color coding, he didn’t have an example for the information link.  Fortunately, a little experimenting on my part produced the script shown below.

<script type="text/javascript">
/*
Insert the event icon script
Written by Consejo, Inc.
Questions: info@consejoinc.com
*/

var iterator = document.getElementsByTagName("td");   
try 
{   
  var i = 0;
  var thisNode;
  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')) 
            {
                try
                {
                    var onClickEvent = thisNode.getAttributeNode('onclick').nodeValue;
                    var origEventDate = onClickEvent.substring(16,37);
                    var cleanUp = new RegExp(/^([1-9]|1[012])+\\u002f+([1-9]|[12][0-9]|3[01])+\\u002f+\d\d\d\d/);
                    var cleanEventDate = cleanUp.exec(origEventDate)[0];
                    cleanEventDate = cleanEventDate.replace(/\\u002f/g,"-");

                    moreNodes[0].innerHTML  += "<a href=\"http://www.videodetective.com/dvdcalendar.aspx?week=\"" + cleanEventDate + " style=\"font-size:8px;position:relative;right:-45%;\">Event Info</a>";
                }
                catch(err){}
            }
        
        }
    }
    i++;
  }
}    
catch (e) 
{   
  alert( 'Error: ' + e ); 
}

 

To implement this script, simply copy and paste this JavaScript into a Content Editor Web Part loaded after the calendar view web part.  If you want to enhance the link, simply insert an IMG tag where the text is shown. 

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.