Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / productivity / SharePoint

Enhancing SharePoint 2013 Calendar sp.ui.applicationpages.calendar.js JavaScript Functionality

5.00/5 (2 votes)
13 Apr 2014CPOL 26K  
SharePoint 2013 Calendar - Capturing Render & Resize events

Introduction

The JavaScript code provided here helps to add additional functionality to SharePoint 2013 Calendar.

Background

Last month, I was looking into different options to add additional functionality to Calendar. But I couldn't find any articles that could help me in capturing Render & Re-size events of SharePoint 2013 Calendar. After thoroughly understanding the Calendar JavaScript Framework that renders calendar control by analyzing sp.ui.applicationpages.calendar.debug.js, I was able to find a solution to update calendar functionality. I thought of sharing my findings in this tip.

Using the Code

C++
//
// SharePoint 2013 Calendar - Capturing Render & Resize events
// 

function onCalendarGridsRendered(){
    setTimeout(function () { 
        //Add your functionality here
    }, 100);
}

function onCalendarResized(){
    setTimeout(function () { 
        //Add your functionality here
    }, 100);
}

SP.SOD.executeOrDelayUntilScriptLoaded(function () {

    //Week or Day Calendar View
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids_Old = 
        SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids = 
        function SP_UI_ApplicationPages_DetailCalendarView$renderGrids($p0) {
        this.renderGrids_Old($p0);

        onCalendarGridsRendered();
    };
    
    //Month Calendar View
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids_Old = 
        SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = 
        function SP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
        this.renderGrids_Old($p0);

        onCalendarGridsRendered();
    };

    //Resize Calendar
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized_Old = 
        SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized;
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized = 
        function SP_UI_ApplicationPages_CalendarStateHandler$parentResized() {
        this.parentResized_Old();

        onCalendarResized();
    };
}, "SP.UI.ApplicationPages.Calendar.js"); 

That's all you need to do. So simple once you know how to add the additional code.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)