CustomizeSharepointCalendarEvents using Javascript

CustomizeSharepointCalendarEvents using Javascript

Description

This article provides detail about overriding out of box SharePoint calendar events. This is helpful where you need to override behavior of out of box calendar event such as show only particular event or display any additional details with calendar events. This is also helpful in rendering calendar events conditionally or to filter calendar events.

Code Snippet

//Start Execution 
ExecuteOrDelayUntilScriptLoaded(CustomizeCalendarEvents,"SP.UI.ApplicationPages.Calendar.js"); 
// This method customize calendar events. 
function CustomizeCalendarEvents() { 
try 
{       
var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;   
SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function($p0, $p1) {  
 // Do your stuff on $p0 for eg add/remove elements from $p0 
 // Call this method to render events on the page. 
 _onItemsSucceed.call(this, $p0, $p1); 
 };
 }
catch (err) {
    txt = "There was an error on this page.\n\n";
    txt += "Error description: " + err.message + "\n\n";
    txt += "Click OK to continue.\n\n";
    alert(txt);
}

 

 

Code Explanation

      

 

  1. The very first function calls custom function when calendar.js is loaded completely.

ExecuteOrDelayUntilScriptLoaded(CustomizeCalendarEvents,"SP.UI.ApplicationPages.Calendar.js");

 

  1. Inside try we are overriding calendar method.

 $p0 is an array containing all events to be rendered on the page. So you can modify this array according to your need for eg. Show selected events from this array and remove un-wanted events and supply it to _onItemsSucceed.call(this, $p0, $p1); method

 

  1. $p0 Contents :

          a)      Event ID :  event id is available in variable  ‘$12”. It can be accessed by following below syntax

         $p0[index].$12 

        Here is complete elements of array $p0


 

     

 

Usage Scenarios

      

1)      Filter calendar events based on query string in Url.

2)      To apply color coding to specific events based on condition.

3)      Limit number of events per day/month.

4)      It can control basic functionalities of calendar events.

Leave a Comment
  • Please add 5 and 5 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • Rahul A Shinde edited Revision 1. Comment: added code block and TOC

  • Maheshkumar S Tiwari edited Original. Comment: Added tags

Page 1 of 1 (2 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Maheshkumar S Tiwari edited Original. Comment: Added tags

  • Rahul A Shinde edited Revision 1. Comment: added code block and TOC

  • You can make this article better by puting background information abou this script, more screenshots of real output of this script.

Page 1 of 1 (3 items)