Harnessing the power of the SPCalendarView control

Posted: Grant | Comments: 1 | March 13th, 2012

Mar 13

The SPCalendarView control in SharePoint 2010 is really pretty snappy. It loads data with the slight of hand that is AJAX and leaves the user with an oh-so-pleasant user experience. So, if SharePoint developers wish to use the SPCalendarView control and deliver the same user experience with custom data; that should be pretty straight forward, right? Ehhh… kind of…

All kidding aside, the control has a few somewhat odd quirks:

There are no events for when the view type changes from week, day or month. This is a simple string value that is set (by you) when the page loads. Not only this; but the value is case-sensitive (all lowercase).
The control doesn’t seem to work outside of a Web Part. If the control is used in a user control; binding an SPCalendarItemCollection to the datasource appears to have no affect. I found a workaround, but I really feel there has to be an easier answer, plus I’d have to forego all of the AJAX-ness that made me want to use the control to begin with!
If you DO decide to use the SPCalendarView in a Web Part; it must be derived from the SharePoint Web Part class, not the ASP.NET Web Part class.

OK, now that I’ve named a few of the limitations; how many of you just gave up? Hold on! I have some good news….

After digging through a lot of JavaScript in the SharePoint ECMA Script Library, I was able to pin point the issue and in short; the control was never really designed to work outside of a Web Part. The control is very heavy on the AJAX, in fact the data is stored in a JSON fragment on the page then loaded after the page is loaded. The AJAX implementation of the control can be found in the SP.UI.ApplicationPages.Calendar.js file at the SharePoint root. In this file you’ll see the following function definition:

SP.UI.ApplicationPages.ElementUtility.$3f = function ($p0) {
    return $get('WebPart' + $p0);
}

Notice that the function is assuming that the control that is being requested for binding is ALWAYS a Web Part (remember, the calendar data is in a JSON fragment and loaded in JavaScript AFTER the page loads). The function always prepends the string ‘WebPart’ to the ID of the control when supplying the argument to the $get function. Obviously if we are using the SPCalendarView in a user control or application page, this is going to fail. So how do we fix it?

Since SharePoint 2010 has the handy SP.SOD class; we can write a function that executes when the page loads and will redefine the above function.

Let’s assume we have a user control that’s hosting the SPCalendarView and let’s place the following code above our SPCalendarView declaration in the ASCX file to use an anonymous function to redefine the offending function like so:

<script type="text/javascript">
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
    SP.UI.ApplicationPages.ElementUtility.$3f = function ($p0) {
        return ($p0.substring(0, 3).toUpperCase() == "WPQ")
                   ? $get('WebPart' + $p0)
                   : $get($p0);
    }
}, "SP.UI.ApplicationPages.Calendar.js");
</script>
<SharePoint:SPCalendarView
  ID="calSample"
  runat="server">
</SharePoint:SPCalendarView>

This little fragment of code will check to see if the provided ID is a Web Part and if it is not; it will try to get the element without adding the ‘WebPart’ prefix to the ID. Furthermore, we’ve addressed the issue that allows use to utilize the SPCalendarView control without modifying any of the OOB JavaScript files in the SharePoint root. Wrapping the whole bit in an SP.SOD.executeOrDelayUntilScriptLoaded function call ensures that the JavaScript file will have been loaded before we try to redefine it.

You might need to make some small changes to the script in your implementation, but with this little JavaScript fragment, you can harness the power of the SPCalendarView control in your custom SharePoint applications.

1 comment

Harnessing the power of the SPCalendarView control – SharePoint … | ARB Security Solutions says:
March 13, 2012 at 11:53 am

[...] SharePoint Blog Post From SharePoint Development – Google Blog Search: Want to use the SPCalendarView control with custom data in SharePoint 2010? Check out this [...]

Reply