Javascript - Обратный вызов FullCalendar.js после инициализации

Question

Я пытаюсь расширить функциональность плагина JS FullCalender. Я совершенно новичок в концепциях OOP для javascript, а также в разработке плагинов jQuery. На первом этапе мне интересно, как использовать и получить доступ к плагину FullCalendar. Метод fullCalendar можно назвать любой DOM элемент, а параметры календаря может быть задан как объект JSON:

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

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

Я пытался вызвать этот метод создания снова и изменить функцию обратного вызова eventRender, но он не работает. Я предполагаю, потому что календарь позволяет только один экземпляр активен в элементе DOM. Но как я могу изменять параметры и обратные вызовы без разрушения и воссоздания календаря?

Кроме того, я попытался получить доступ к объекту календаря напрямую, но, я думаю, из-за инкапсуляции он не отображается через FullCalendar. Напротив, я вижу, что функцию fullCalendar можно вызвать со строкой, определяющей метод, который будет вызываться в календаре. Является ли это общим механизмом инкапсуляции плагинов?

Answer 1

Что касается первой части, FullCalendar объединяет параметры во время инициализации

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

так что вы можете изменить только eventRender по

var currentHandler 

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

, а затем изменить currentHandler реализацию (т.е. currentHandler = myFirstHandler)

Когда он приходит к вызовам методов плагина, да, это обычная практика и описан здесь How to create a jQuery plugin with methods?

Answer 2

Вместо этого eventRender Я бы воспользовался официальным eventAfterAllRender обратным вызовом, см. docs.

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

Это вид скрытых в документах. Лучше было бы переименовать эту функцию на afterinit или alike.

Answer 3

Не уверен, что версия fullcalendar вы использовали во время проводки, но и для тех, кто ищет теперь с v2 или v3, fullcalendar имеет on/off и get/set утилиты, которые позволяют добавлять/удалять функции обработчика или получить опции/набор динамически после инициализации.

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

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

Согласно документации:

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

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