Click here to Skip to main content
Click here to Skip to main content

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

, 13 Apr 2014
Rate this:
Please Sign up or sign in to vote.
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

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

About the Author

Rocky R. Fernandes
Software Developer (Senior) 3MD Tech
United States United States
Rocky Fernandes has over 11 years of experience in Software Industry mostly developing Web Applications. Other than having vast experience in various Microsoft Technologies like SharePoint, ASP.Net, C#, VB.Net, Silverlight, WCF, MVC, Web API, SQL Server, ADO.Net, ADOMD.Net, LINQ, Entity Framework, Exchange Web Service(EWS) API, he also has vast experience in Client Side Scripting like JavaScript, jQuery, JSON, JSONP, CSS and HTML5. He is very much passionate in programming and enjoys doing it. In the academic side he holds a BE Degree in Computer Science & Engineering. In the certification side he holds certifications in Sharepoint 2010, SharePoint 2013, ASP.Net & SQL Server.
 
In most of the free time, he will be spending in technical activities like researching solutions, reading technical articles and learning new stuff. He believes that following Best Practices and Coding standard is a way to go for producing an efficient, quality & satisfactory application.
 
Homepage: http://www.smartsolutionshub.com/
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 13 Apr 2014
Article Copyright 2014 by Rocky R. Fernandes
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid