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
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.
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> tag on the page (you could also put them in a Content Editor Web Part):
Setting Up the Data View Web Part
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.