3

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?

Michbeckable
  • 1,851
  • 1
  • 28
  • 41
  • 1
    what is your goal with regard to needing to change eventRenderer? – charlietfl Oct 26 '14 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 Oct 26 '14 at 20:32
  • as with many plugins there is a destroy method also http://fullcalendar.io/docs/display/destroy/ so if you needed to change behaviors you could initialize again with different config – charlietfl Oct 26 '14 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 Oct 26 '14 at 20:57
  • 1
    not always, it depends on the plugin. SOme have ways to change options on the fly – charlietfl Oct 26 '14 at 20:59

3 Answers3

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

Community
  • 1
  • 1
matys84pl
  • 8,344
  • 1
  • 18
  • 18
1

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.

Avatar
  • 14,622
  • 9
  • 119
  • 198
0

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);
});
danbrellis
  • 370
  • 3
  • 13