Javascript - Ändern Sie den FullCalendar.js-Callback nach der Initialisierung

Question

Ich versuche, die Funktionalität des FullCalender JS-Plugins zu erweitern. Ich bin ziemlich neu in den JavaScript OOP-Konzepten sowie der Entwicklung von jQuery-Plugins. In einem ersten Schritt frage ich mich, wie ich das FullCalendar-Plugin verwenden und darauf zugreifen kann. Die fullCalendar-Methode kann auf jedes DOM-Element aufgerufen werden, während die Kalenderparameter als JSON-Objekt übergeben werden können:

$('#calendar').fullCalendar({
    editable: true,             // ein Parameter
    events: "./events.php",     // einige Ereignisse

    eventRender: function(event, element) {     // ein Rückruf
        // Hier etwas tun
    }
});

Ich habe versucht, diese Erstellungsmethode erneut aufzurufen und das Callback eventRender zu ändern, aber es funktioniert nicht. Ich vermute, dass dies daran liegt, dass der Kalender nur eine aktive Instanz auf dem DOM-Element zulässt. Aber wie kann ich Parameter und Callbacks ändern, ohne den Kalender zu zerstören und neu zu erstellen?

Des Weiteren habe ich versucht, direkt auf das Kalenderobjekt zuzugreifen, aber aufgrund der Kapselung wird es meiner Meinung nach nicht durch das FullCalendar-Plugin freigelegt. Im Gegensatz dazu sehe ich, dass die Funktion fullCalendar mit einem String aufgerufen werden kann, der eine Methode angibt, die auf dem Kalender aufgerufen werden soll. Ist dies ein üblicher Mechanismus bei der Plugin-Kapselung?

Answer 1

Was die erste Teil betrifft, FullCalendar fusioniert die Optionen während der Initialisierung

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

so dass du nur eventRender ändern kannst durch

var currentHandler

$('#calendar').fullCalendar({   
eventRender: function(event, element) {     // ein Rückruf
    currentHandler(event, element)
}
});

und dann ändere die Implementierung von currentHandler (d.h. currentHandler = myFirstHandler)

Wenn es um das Aufrufen von Plugin-Methoden geht, ja, das ist eine gängige Praxis und wurde hier beschrieben Wie erstellt man ein jQuery-Plugin mit Methoden?

Answer 2

Statt eventRender würde ich den offiziellen eventAfterAllRender Callback verwenden, siehe Dokumentation.

        // div verstecken, nachdem fullcalendar initialisiert wurde
        eventAfterAllRender: function(view)
        {
            $('.mycustomdiv').hide();
        }

Dies ist in der Dokumentation etwas versteckt. Es wäre besser, diese Funktion umzubenennen in "afterinit" oder ähnliches.

Answer 3

Nicht sicher, welche Version von fullcalendar Sie zum Zeitpunkt des Posts verwendet haben, aber für alle, die jetzt mit v2 oder v3 suchen, hat fullcalendar Ein-/Ausschalten und Abrufen/Festlegen Dienstprogramme, die es Ihnen ermöglichen, Handler-Funktionen hinzuzufügen/entfernen oder Optionen dynamisch nach der Initialisierung abzurufen/festzulegen.

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

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

Laut der Dokumentation:

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

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