How to expand Sharepoint 2013 calendar by default [JavaScript]

This code has been tested for Sharepoint 2013 only. It permits to expand by default (so as soon as the page is loaded) the events in the Month calendar view.

See here a solution for Sharepoint 2010.

Tested with IE8 and Firefox 41. You’ll have to add the below JavaScript code into your calendar page:

// the below function simulate a click on a link
function fireEventClick(elem){
    if(document.createEvent){                                                 
      var e = document.createEvent('MouseEvents');
      e.initMouseEvent('click', /* Event type */
      true, /* Can bubble */
      true, /* Cancelable */
      document.defaultView, /* View */
      1, /* Mouse clicks */
      0, /* Screen x */
      0, /* Screen y */
      0, /* Client x */
      0, /* Client y */
      false, /* Ctrl */
      false, /* Alt */
      false, /* Shift */
      false, /* Meta */
      0, /* Button */
      null); /* Related target */
      elem.dispatchEvent(e);                     
    } else { // pour IE
      elem.click();
    }
}

// Expand the events
// because Sharepoint redraw ALL the events when we click on Expand, then we need a special recurrent function
function ExpandEvents(idx) {
  var a = document.querySelectorAll('a[evtid="expand_collapse"]');
  if (idx < a.length) {
    if (a[idx].parentNode.getAttribute("_expand") !== "collapse") fireEventClick(a[idx]);
    ExpandEvents(++idx);
  }
}

function onCalendarGridsRendered(){
  setTimeout(function() {
    ExpandEvents(0)
  }, 250)
}

// some code reused from http://www.codeproject.com/Tips/759006/Enhancing-SharePoint-Calendar-sp-ui-applicationpag
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();
    };
    
    ExpandEvents(0)
}, "SP.UI.ApplicationPages.Calendar.js");

And we can hide the « Collapse » links with one line of CSS:

.ms-cal-nav[evtid="expand_collapse"] { display: none !important }

3 avis sur “How to expand Sharepoint 2013 calendar by default [JavaScript]

  1. Matt M

    Fantastic! This works great. I put the Expand script in a CEWP and the CSS in a HTML Form webpart. Super easy to implement.

  2. Viktoria

    Great! I am very grateful to you for the published code! It’s simple and most important – it works!
    Thanks a lot!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*