Calendar not showing in Firefox or Chrome

Question

Using SharePoint 2013 (Office Online 365) and added a team calendar to front page, which has overlays.

The calendar works and shows all events in Internet Explorer 11. Now if I use another browser like Firefox (latest build) and Google Chrome (latest build) it simply doesnt work.

I have used the developer options for the both browsers to debug the issue and all I can come up with is this below.

Type Error: A is Null

sp.ui.applicationpages.calendar.js

I have no idea if this is casuing an issue here nor no idea what it means, but thats all I can find.

Now to throw a spanner in the works here, in Firefox or Chrome if I edit the page ALL the calendar invites show up and it works perfect. If I save the page they disapear.

Answer 1

SharePoint JavaScript is weak. There are so many bad and incoherent decisions in the code base, that I can't see getting fixed without a complete rewrite. Including all the old web parts. This kinda points ASP.NET 5/MVC6 gun at SharePoint. Can't see SharePoint survive that one :)

The problem here stems from the web parts complex DOM structure and how Chrome interprets this differently. You can fix it by hi-jacking the function that fails and wrap it in a try/catch.

This fix will have no negative consequence towards other code, as SharePoint JS code doesn't use try/catch. Only thing that might happen is that the generated function name $6d_2 can change with the next build, so the fix is as brittle as SharePoint itself, but still better than nothing. For SharePoint 2016 (OnPrem) this has to be $6f_2

Just put this in a Script Editor web part on the same page as the Calendar overlay webpart.

<script type="text/javascript">

(function(){
  ExecuteOrDelayUntilScriptLoaded(function(){
    var oldFunc = SP.UI.ApplicationPages.CalendarTableBase.prototype.$6d_2;
    SP.UI.ApplicationPages.CalendarTableBase.prototype.$6d_2 = function(){
      try{
        oldFunc.apply(this, arguments);
      }
      catch(err){
          console.log('SharePoint Calendar web part just crashed! Ignoring');
          console.log(err.message);
      }
    };
  }, "sp.ui.applicationpages.calendar.js");
}());

</script>

Answer 2

I've been having this same issue for the past two weeks and searched through ton's of blogs and forums before coming across this post.

If you don't want to read that whole thread, the short answer is the Calendar Web Part was added in a Rich Text Zone. This causes the JavaScript error you were getting that kept the Calendar Overlays from displaying and the Calendar from being responsive.

I moved my Calendar into the header section and all of the overlays are now showing correctly. You can move the Calendar to any non-Rich Text Web Part Zone, or use a publishing page instead.

Let me know if that works!