Javascript - changing FullCalendar.js callback after initialization
I am trying to extend the functionality of the FullCalender plugin . I am completely new to OOP concepts for javascript as well as jQuery plugin development. In the first step, I am wondering how to use and access the FullCalendar plugin. The method fullCalendar
can be called by any DOM element, while the calendar parameters can be specified as a JSON object:
$('#calendar').fullCalendar({
editable: true, // a parameter
events: "./events.php", // some events
eventRender: function(event, element) { // a callback
// do something here
}
});
I tried to call this create method again and change the callback eventRender
but it doesn't work. I'm guessing because the calendar only allows one instance to be active on a DOM element. But how can I change parameters and callbacks without destroying and recreating the calendar?
Also, I tried to access the calendar object directly, but I guess because of the encapsulation, it is not visible through FullCalendar. On the contrary, I see that the function fullCalendar
can be called with a string defining the method to be called on the calendar. Is this a generic plugin encapsulation mechanism?
source to share
Regarding the first part, FullCalendar concatenates parameters during initialization
var options = mergeOptions({}, defaults, instanceOptions);
so you can change eventRender
to
var currentHandler
$('#calendar').fullCalendar({
eventRender: function(event, element) { // a callback
currentHandler(event, element)
}
});
and then change the implementation currentHandler
(i.e. currentHandler = myFirstHandler
)
When it comes to calling plugin methods, yes, it is common practice and described here How to create a jQuery plugin with methods?
source to share
eventRender
I would use the official callback instead eventAfterAllRender
, see the docs .
// hide div after fullcalendar has initialized
eventAfterAllRender: function(view)
{
$('.mycustomdiv').hide();
}
It's hidden in the docs. It would be better to rename this function to follow or similar.
source to share
Don't know which version of fullcalendar you were using at the time of posting, but for those who are currently looking from v2 or v3, fullcalendar has on / off and get / set utilities that allow you to add / remove handler functions or get / set parameters 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);
});
source to share