Display Events from a SharePoint Calendar Using jQuery and FullCalendar

This entry is part 1 of 2 in the series Building a Better SharePoint Calendar.

As part of a large department site redesign project, I wanted to implement a better calendar solution than what MOSS 2007 gives you OOTB. I remembered coming across the FullCalendar jQuery plugin a while back, so I decided to try using it with the calendar on my department’s site. I haven’t tested this in SharePoint 2010, but it should work just fine regardless of the version (just verify all of the column references in case any of them are named differently).

Prepping the Resources

I downloaded the latest FullCalendar package, unzipped the file, and uploaded the CSS and JavaScript files to a document library on my site. I like to use a library called WebResources and add a choice column with options for “CSS,” “Image,” “JavaScript,” and “jQuery” so I can keep track of all of my various resources in one place, with versioning.

Screenshot of FullCalendar Resources in the WebResources Library
I keep all of my resources in a "WebResources" document library grouped by the type of resource.

Once the files were uploaded, I copied the calendar.aspx page and renamed it CalendarCustom.aspx in SharePoint Designer (SPD). Then I switched back to the web UI, went to the calendar settings, and modified the duplicate “Calendar” view so I could rename it and set it as the default (this is the view that will contain our custom calendar). Next I opened that view and hid the default list view web part for the calendar.

The last step in prepping the page was to open it in SPD and add references to the CSS and JavaScript files that the calendar will need just below the <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> tag on the page (you could also put them in a Content Editor Web Part):

Screenshot of CSS and Script References for FullCalendar
Load the CSS and JavaScript references on the page. This can be done in a Content Editor Web Part, but I prefer to add them in the PlaceHolderMain section.

Setting Up the Data View Web Part

To make this happen, I used a Data View Web Part (DVWP) to output the necessary JavaScript for the plugin to generate the calendar. I selected the web part zone and inserted a new DVWP. I chose the Calendar list as my data source, selected the Title field and inserted it as a “Multiple Item View.”

Screenshot of Calendar Data Source Displayed as a Multiple Item View
Insert a DVWP with the calendar as the data source, and insert the Title field as a "Multiple Item View."

I didn’t want to bog down the browser by loading hundreds of really old events, so I set a filter on the DVWP so that only events with a start time greater than or equal to today minus 90 days would be displayed (see this post for more information on setting up CAML query offsets). This allows people to view events up to three months in the past, as well as current and future events. I also sorted the events by start time in ascending order.


SharePoint, jQuery, and FullCalendar—Now with SPServices

This entry is part 2 of 2 in the series Building a Better SharePoint Calendar.

In the first entry to this series, I demonstrated how you can use a data view web part (DVWP) to emit SharePoint® calendar events as JSON that the FullCalendar jQuery plugin can use. Although it works fairly well, there are some limitations to the solution. It doesn’t handle recurring events, it doesn’t retrieve all events, it doesn’t support pagination/bookmarking, and it doesn’t provide a way to connect the calendar to Outlook® or create alerts.

This post will overcome the first two limitations by borrowing most of the code posted in this discussion thread on CodePlex and doing away with the DVWP altogether. Jim Bob Howard provided a lot of great information, but it’s broken up over several replies and is a bit difficult to follow. I also wanted to expand on the functionality of his solution by displaying events in the local time zone instead of the web server’s time zone and optimizing the web service calls by retrieving as few events at a time as possible instead of getting a month’s worth of events at a time.

Screenshot of a Fullcalendar demo page.
Fullcalendar in all it’s jQuery-themed glory!