Share via

SharePoint: Customize Calendar Events using Javascript

  • Article

Introduction

Today I came across a requirement to filter the oob calendar(webpart) based on querystring parameter.For eg. If QueryString parameter  Field1 = “XYZ” than calendar page should show only event which is having Field1=”XYZ”In order to achieve above requirement using JavaScript, we need to override method of Calendar.js

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) {   

// Get querystring parameter value
Var fieldValue = getQueryString("Field1");
  
// Get all items from calendar list which is having Field1 = fieldValue and store item id in itemCollection Array using ECMA/web serviceitemIdCollection = GetItemsfromList(fieldValue); 

// This function identifies item to hide on the page.

 itemToHide   =   GetItemsToHide($p0); 

// Remove selected items from array ($p0).
for(var count=0; count < itemToHide.length; count++)
{ 
   for(var flag=0 ; flag<$p0.length; flag++)
   { 
    if($p0[flag].$12 == itemToHide[count])   
    {  
    removeItemByIndex($p0,flag);  
    break;   
    } 
}  }

 // 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); 
}  
}
/ This function adds items to hide in array.
 function GetItemsToHide($p0) 
{  
   for(var i=0; i<$p0.length; i++)   
{  
   var itemId = $p0[i].$12; 
    var result =  IsItemExist(itemId,itemIdCollection);
     if(result == -1)   
     {     
        itemToHide.push(itemId);  
      }   
  } 
  }

// This function removes item from array.
function removeItemByIndex(arr, index)
{   
arr.splice(index, 1);
 }
  // This function checks element exist in array or not.
 function IsItemExist(elem, array)
 {      
    var len = array.length;      

    for (var i = 0; i < len; i++)
     {          
      if (array[i] == elem)
       {
        return i;
       } 
    }   
     return -1;  
  } 

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

   

 

Calendar  before Applying Solution

Calendar  After Applying Solution

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.