Vollständig benutzerdefinierte Lightbox

Um eine vollständig benutzerdefinierte Lightbox für den Scheduler zu spezifizieren, definieren Sie die showLightbox() Methode neu:

scheduler.showLightbox = (id) => {
    // id - ID des Ereignisses
    ... Code, um ein beliebiges individuelles Formular anzuzeigen ...
};

Es gibt 2 Hilfsmethoden, die Sie verwenden können, um die Implementierung zu vereinfachen:

startLightbox() - zeigt eine benutzerdefinierte Lightbox im angegebenen HTML-Container zentriert auf dem Bildschirm
endLightbox() - schließt die Lightbox

Angenommen, Sie haben irgendwo auf der Seite den HTML-Container #custom_form. Dann können Sie eine benutzerdefinierte Lightbox wie folgt implementieren:

const customForm = document.getElementById("custom_form");

scheduler.showLightbox = (id) => {
    const event = scheduler.getEvent(id);
    scheduler.startLightbox(id, customForm);
    ...'hier müssen Sie Werte im Formular setzen'...
    // document.getElementById("some_input").value = event.text;
};

// Sollte mit dem 'Speichern'-Button verknüpft sein
const saveForm = () => {
    const event = scheduler.getEvent(scheduler.getState().lightbox_id);
    ...'hier müssen Sie Werte aus dem Formular übernehmen'...
    // event.text = document.getElementById("some_input").value;
    scheduler.endLightbox(true, customForm);
};

// muss an den 'cancel'-Button angehängt werden
const closeForm = () => {
    scheduler.endLightbox(false, customForm);
};

Verwandte Beispiele​

Verwandte Beispiele