Using the FullCalendar Plugin in SharePoint 2013 Apps
As we all know, SharePoint 2013 has heavy emphasis on client-side programming. Because of this, I have had my eye out for a good jQuery calendar plugin to use with JavaScript. In this post, I’ll show you how to get up and running with the FullCalendar jQuery plugin by Adam Shaw. The sample app will aggregate events from all of the calendars in the farm via search and display them in a single calendar.
Note that this article is coming out of research I am doing to create app samples for MSDN. As a result, I’m not posting the full code solution at this point, but will announce when the samples (around 20 of them) are available.
To get started, download the v1.6.0 FullCalendar plugin files. After creating a new SharePoint-hosted app. Add the following libraries to the scripts folder of the app:
- · fullcalendar.js
- · jquery-1.9.1.js
Note that the FullCalendar plugin expects the latest version of jquery. So, you should add version 1.9.1 to your app and delete the version that is added by the project template. Now add the following style sheet to the Content folder in your app:
- · fullcalendar.css
Finally, add a div tag with an id of “corporateCalendar” to hold the calendar as shown in the following code:
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div style="margin:25px;">
<div id='corporateCalendar'></div>
</div>
</asp:Content>
FullCalendar can use a function, JSON feed, or array as a data source. For this sample, I’ll keep it simple and build an array that gets loaded along with the app. The format of the array will look like the following:
[
{
title : 'Golf Trip',
start : '2013-01-01 12:00:00'
end : '2013-01-07 12:00:00'
allDay : true
},
{
title : 'Student Visit',
start : '2013-02-01 09:00:00'
end : '2013-02-07 14:00:00'
allDay : true
},
{
title : 'Company Picnic',
start : '2013-04-01 13:00:00'
end : '2013-04-01 15:00:00'
allDay : false
}
]
As you navigate the calendar, FullCalendar provides events you can trap that will allow you to receive information about the start and end dates currently being displayed. You can also alter display characteristics. For example, all-day events should display without time information.
The idea is to build the required data array based on data returned from a search. In this way, you can search all of the calendars in the farm and build a master calendar. The results of the search will be security-trimmed, which is cool because our calendar will only show events meaningful to the viewer. The problem, however, is that SharePoint 2013 doesn’t have the Managed Properties for event start date, event end date, or all-day events out of the box. So, I had to define a the following managed properties:
| Crawled |
Managed |
| ows_EventDate |
EventDate |
| ows_EndDate |
EndDate |
| ows_fAllDayEvent |
AllDayEvent |
After a full crawl, I could then write queries like the following to return all events for CY2013:
ContentClass:STS_ListItem_Events EventDate>1/1/2013 EventDate<12/31/2013
With the search working, I needed to create a JavaScript library that would run the query and package up the event data. I’ll gloss over the details here because this post is about the calendar itself, but my basic approach was to use a REST call like this:
var url = _spPageContextInfo.webAbsoluteUrl +
"/_api/search/query?querytext='ContentClass:STS_ListItem_Events" +
" EventDate>" + startDateString +
" EndDate<" + endDateString +
"'&selectproperties='Title,EventDate,EndDate,AllDayEvent,Path'";
var deferred = $.ajax({
url: url,
method: "GET",
headers: {
"accept": "application/xml",
},
success: function (data) {
//Fill event array with results
},
error: function (err) {
//Handle errors
}
});
return deferred.promise();
My library also needed a function to return the event array in the form expected by FullCalendar. So I built a JSON object like this:
Get_formattedEvents = function () {
var json = [];
for (var i = 0; i < events.length; i++) {
json.push({
title: events[i].get_title(),
start: events[i].get_formattedStart(),
end: events[i].get_formattedEnd(),
allDay: events[i].get_formattedAllDay()
});
}
return json;
}
I packaged the functions into a library called WingtipToys.Events with a load function that accepted arguments for the span of days before and after today’s date for which to run the search. The following code shows how the calendar was filled with events 90 days prior to the current date and one year into the future. Take note of how theget_formattedEvents function is called by the FullCalendar plugin. That’s really all you have to do, which makes this plugin a great addition to your SharePoint 2013 app development toolkit.
WingtipToys.Events.load(90, 365).then(
function (data) {
$("#corporateCalendar").fullCalendar({
events: WingtipToys.Events.get_formattedEvents()
});
},
function (err) {
alert(JSON.stringify(err));
}
);
The final sample is going to include a separate list in which you can add “included paths” to the search query. The idea here is to allow you to select exactly which calendars to aggregate rather than take every one in the farm. Again, I'll announce when the final samples become available on MSDN.