Forge Component
(27)
Published on 2019-03-29 by Daniel Filipe
27 votes
Published on 2019-03-29 by Daniel Filipe

Problem : 
If the page is first rendered with the calendar not showing, and then through ajax refresh you try to display it the calendar will not render.


Solution:

To fix this go inside the FullCalendar2 Module and search for the OSFullCalendar function definition. There you should have this code : 

SyntaxEditor Code Snippet

function OSFullCalendar (calendarPlaceHolderId, eventHandlerBlockId) {
    this.calendarPlaceHolderId = calendarPlaceHolderId;
    this.eventHandlerBlockId = eventHandlerBlockId;
    this.calendar = undefined;
    var instance = this;

    this.init = function (options) {
        var calendarEl = document.getElementById(calendarPlaceHolderId);
        if(window.hascalendar===undefined) { // to allow the use of Ajax Refresh 
            document.addEventListener('DOMContentLoaded', function() {
                window.hascalendar = true; 
                var calendarEl = document.getElementById(calendarPlaceHolderId); 
                var cal = new FullCalendar.Calendar(calendarEl, options);
                cal.render();
                instance.calendar = cal;
            }); 
        } else {                        // to allow the use of Ajax Refresh 

The problem is that for some reason that event that we binded the render logic is never triggering on an ajax refresh.

To fix this change to  :

SyntaxEditor Code Snippet

function OSFullCalendar (calendarPlaceHolderId, eventHandlerBlockId) {
    this.calendarPlaceHolderId = calendarPlaceHolderId;
    this.eventHandlerBlockId = eventHandlerBlockId;
    this.calendar = undefined;
    var instance = this;

    this.init = function (options) {
        var calendarEl = document.getElementById(calendarPlaceHolderId);
        if(window.hascalendar===undefined) { // to allow the use of Ajax Refresh   
            $("#"+calendarPlaceHolderId).ready(function() { 
                window.hascalendar = true; 
                var calendarEl = document.getElementById(calendarPlaceHolderId); 
                var cal = new FullCalendar.Calendar(calendarEl, options);
                cal.render();
                instance.calendar = cal;
            }); 
        } else {                        // to allow the use of Ajax Refresh 
            var calendarEl = document.getElementById(calendarPlaceHolderId);
            var cal = new FullCalendar.Calendar(calendarEl, options);
            cal.render();
            instance.calendar = cal;
        };
    }


Best Regards,

Pedro Neto

Hi Perdo,

Why don't you mark your post as solution as it contains one?

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Perdo,

Why don't you mark your post as solution as it contains one?

Regards,

Daniel

Hi Daniel, 

Thanks for the reply, but how do I do that ? :)


Pedro


There should be a "Mark as solution button", but now that I checked I notice that is only available on every reply not the original post. I think it would be nice if this would be possible, so I just added an Idea to vote on.

Daniël Kuhlmann wrote:

There should be a "Mark as solution button", but now that I checked I notice that is only available on every reply not the original post. I think it would be nice if this would be possible, so I just added an Idea to vote on.


Nice idea Daniel.. Voted!.