Click here to Skip to main content
13,457,409 members
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 13 Apr 2014

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


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


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 = 
        function SP_UI_ApplicationPages_DetailCalendarView$renderGrids($p0) {

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


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

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

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


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.


You may also be interested in...

Comments and Discussions

QuestionAdding Metadata to the event items in Calendar month (summary) view Pin
Member 815800320-Aug-14 8:56
memberMember 815800320-Aug-14 8:56 
AnswerRe: Adding Metadata to the event items in Calendar month (summary) view Pin
cjmorelock2-Sep-14 4:30
membercjmorelock2-Sep-14 4:30 
GeneralRe: Adding Metadata to the event items in Calendar month (summary) view Pin
Member 1149253623-Jun-15 5:18
memberMember 1149253623-Jun-15 5:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180322.1 | Last Updated 13 Apr 2014
Article Copyright 2014 by Rocky R. Fernandes
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid