CODEWITHSUNDEEP
javascriptjquery-pluginsfullcalendar
Michbeckable
Michbeckable

Reputation: 1881

Javascript - Change FullCalendar.js callback after initialization

I am trying to extend functionality of the FullCalender JS plugin. I am quite new to javascript OOP concepts as well as jQuery plugin development. In a first step I am wondering how to use and access the FullCalendar plugin. The fullCalendar method can be called on any DOM Element while the calendar parameters can be given as JSON object:

$('#calendar').fullCalendar({   
    editable: true,             // a parameter  
    events: "./events.php",     // some events

    eventRender: function(event, element) {     // a callback
        // do something here
    }
});

I tried calling this creation method again and change the callback eventRender but it does not work. I guess its because the calendar allows only one instance active on the DOM element. But how can I change parameters and callbacks without destroying and recreating the calendar?

Furthermore I tried to access the calendar object directly but I guess due to encapsulation it is not exposed through the FullCalendar. In contrast I see that the fullCalendar function can be called with a string specifying a method to be called on the Calendar. Is this a common mechanism on plugin encapsulation?

Upvotes: 3

Views: 3956

Answers (3)

danbrellis
danbrellis

Reputation: 389

Not sure what version of fullcalendar you were using at the time of posting, but for anyone looking now with v2 or v3, fullcalendar has on/off and get/set utilities that allow you to add/remove handler functions or get/set options dynamically after init.

https://fullcalendar.io/docs/utilities/handlers/

https://fullcalendar.io/docs/utilities/dynamic_options/

According to the docs:

var calendar = $('#calendar').fullCalendar('getCalendar');

calendar.on('eventRender', function(event, element, view) {
  console.log('event rendered!', event);
});

Upvotes: 1

Avatar
Avatar

Reputation: 15156

Instead eventRender I would use the official eventAfterAllRender callback, see docs.

        // hide div after fullcalendar has initialized
        eventAfterAllRender: function(view)
        {
            $('.mycustomdiv').hide();
        }

This is kind of hidden in the docs. Would be better to rename this function to afterinit or alike.

Upvotes: 1

matys84pl
matys84pl

Reputation: 8334

Regarding the first part, FullCalendar merges the options during initialization

var options = mergeOptions({}, defaults, instanceOptions);

so you can only change eventRender by 

var currentHandler

$('#calendar').fullCalendar({   
eventRender: function(event, element) {     // a callback
    currentHandler(event, element)
}
});

and then change currentHandler implementation (i.e. currentHandler = myFirstHandler)

When it comes to calling plugin methods, yes this is a common practice and was described here How to create a jQuery plugin with methods?

Upvotes: 2

Related Questions