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 mon mechanism on plugin encapsulation?

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 mon mechanism on plugin encapsulation?

• javascript
• jquery-plugins
• fullcalendar

Share Follow asked Oct 26, 2014 at 19:38 MichbeckableMichbeckable 1,89111 gold badge3030 silver badges4444 bronze badges 5

• 1 what is your goal with regard to needing to change eventRenderer? – charlietfl Commented Oct 26, 2014 at 19:46
• The callback was just an example for me, of how to change the calendar instance I have just created. But that does not seem to be a valid practice in this case. – Michbeckable Commented Oct 26, 2014 at 20:32
• as with many plugins there is a destroy method also fullcalendar.io/docs/display/destroy so if you needed to change behaviors you could initialize again with different config – charlietfl Commented Oct 26, 2014 at 20:46
• Yes I've noticed the destroy method but as I stated in my question I hoped for a different way than destroy/recreation. My problem seems to be thinking the C++/Java OOP way, where you create an instance and than have methods to change properties. But in javascript plugin context this is different here. – Michbeckable Commented Oct 26, 2014 at 20:57
• 1 not always, it depends on the plugin. SOme have ways to change options on the fly – charlietfl Commented Oct 26, 2014 at 20:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 es to calling plugin methods, yes this is a mon practice and was described here How to create a jQuery plugin with methods?

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);
});

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.