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

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 though to share my findings in this article.

Using the code

//
// 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.