2014-08-19

A blog post by Balamurugan Kailasam was featured

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 pluginI 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:Add a Content Editor webpart.Add the content "<div id='calendar'></div>"Create the following managed propertycldEventDate - Mapped to crawled property "ows_EventDate" cldEndDate   - Mapped to crawled property "ows_EndDate"Include the FullCalendar (JS, CSS) and Jquery JS in the page.Call the "Microsoft.SharePoint.Client.Search.Query.SearchExecutor" with the right keyword property.Return the results to the Full Calendar plugin to display the events.Screen:Code:The below code,Initialize the Full Calendar pluginCalls 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: fullcalendar.css, fullcalendar.min.js, calendar.js. (Note: The above code uses the FullCalendar V1. Please change the code for the latest FullCalendar V2 beta accordingly.).See More

Show more