O365 – SharePoint 2013 – Search based Calendar aggregation – Single Calendar view – from different sites

Scenario: Display a aggregated calendar view from all the calendar list in a single page.

Reference:

• JQuery – Full Calendar plugin

I am going to use the Jquery, Full Calendar plugin, Content editor webpart to demonstrate how to display the Single aggregated calendar using the SharePoint search result (Javascript – CSOM).

Steps:

1. Add a Content Editor webpart.
2. Add the content “<div id=’calendar’></div>”
3. Create the following managed property
   1. cldEventDate – Mapped to crawled property “ows_EventDate”
   2. cldEndDate   – Mapped to crawled property “ows_EndDate”
4. Include the FullCalendar (JS, CSS) and Jquery JS in the page.
5. Call the “Microsoft.SharePoint.Client.Search.Query.SearchExecutor” with the right keyword property.
6. Return the results to the Full Calendar plugin to display the events.

Screen:

Code:

The below code,

• Initialize the Full Calendar plugin
• Calls the Search API with the current view Start and End Calendar date to get the events for the current view.
• It also calls the Search API every time changes the user changes the month.

// JavaScript source code
$(document).ready(function () {
    Initialise();
});
 
function Initialise() {
    var scriptBase = _spPageContextInfo.webAbsoluteUrl + "/" + _spPageContextInfo.layoutsUrl + "/";
    $.getScript(scriptBase + "sp.runtime.js", function () {
        $.getScript(scriptBase + "sp.js", function () {
            $.getScript(scriptBase + "sp.search.js", InitialiseCalendar);
        });
    });
}
 
 
function InitialiseCalendar() {
 
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
        },
        selectable: false,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: true,
        eventMouseover: function (event, jsEvent, view)
        {
            // event.fulltitle - contains the full title.
            // event -> can be extended to have its own property
            // ex: Display a popup on mouse over with the event property
        },
        events: function (start, end, callback) {
            var context = SP.ClientContext.get_current();
            var user = context.get_web().get_currentUser();
 
            var keywordQuery = new Microsoft.SharePoint.Client.Search.Query.KeywordQuery(context);
            var startDate = new Date(Date.parse(start));
            var endDate = new Date(Date.parse(end));
 
            var startmonth = startDate.getUTCMonth() + 1;
            var endmonth = endDate.getUTCMonth() + 1;
            var endmonthString = (endmonth + "").length == 1 ? "0" + endmonth + "" : endmonth + "";
 
            // Constructing the query to get the current month view . Current view might contain 3 months sometimes.
            var query = "";
            for (var i = startmonth; i < endmonth; i++) {
                var startmonthString = (i + "").length == 1 ? "0" + i + "" : i + "";
                query = query + " cldEventDate:" + startDate.getUTCFullYear() + "-*" + startmonthString + "-*";
            }
 
            query = query + " cldEventDate:" + endDate.getUTCFullYear() + "-*" + endmonthString + "-*";
 
            keywordQuery.set_queryText(query);
 
            var properties = keywordQuery.get_selectProperties();
            properties.add('cldEventDate');
            properties.add('Title');
            properties.add('cldEndDate');
            properties.add('Path');
 
            var searchExecutor = new Microsoft.SharePoint.Client.Search.Query.SearchExecutor(context);
            results = searchExecutor.executeQuery(keywordQuery);
            context.executeQueryAsync(function () {
                var searchresults = results.m_value.ResultTables;
                if (searchresults.length > 0) {
                    var searchresultsrows = searchresults[0].ResultRows;
                    if (searchresultsrows.length > 0) {
                        var events = [];
                        for (var i = 0; i < searchresultsrows.length; i++) {
                            events.push({
                                title: searchresultsrows[i].Title.substring(0, 20) + "...",
                                start: searchresultsrows[i].cldEventDate,
                                end: searchresultsrows[i].cldEndDate,
                                url: searchresultsrows[i].Path,
                                fulltitle: searchresultsrows[i].Title
                            });
                        }
                    }
 
                    callback(events);
 
                }
            }, function () { })
        }
    });
}

Attachments: , , . (Note: The above code uses the FullCalendar V1. Please change the code for the latest FullCalendar V2 beta accordingly.).