Vollständig individuelles Lightbox

Um ein vollständig individuelles Lightbox für den Scheduler zu erstellen, müssen Sie die Methode showLightbox überschreiben:

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

Es gibt zwei Hilfsmethoden, die dies erleichtern können:

  • startLightbox - zeigt ein individuelles lightbox in einem angegebenen html-container an, zentriert auf dem bildschirm.
  • endLightbox - schließt das lightbox


Angenommen, Sie haben irgendwo auf der Seite einen HTML-Container mit der ID #custom_form. Um ein individuelles Lightbox zu implementieren, könnten Sie Folgendes tun:

var custom_form = document.getElementById("custom_form");
 
scheduler.showLightbox = function(id){
    var ev = scheduler.getEvent(id);
    scheduler.startLightbox(id, custom_form );
    ...'hier müssen Sie Werte im Formular setzen'...
    //document.getElementById("some_input").value = ev.text;
}
// Sollte mit dem 'Speichern'-Button verknüpft sein
function save_form() {
    var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
    ...'hier müssen Sie Werte aus dem Formular übernehmen'...
    //ev.text = document.getElementById("some_input").value;
    scheduler.endLightbox(true, custom_form);
}
// Sollte mit dem 'Abbrechen'-Button verknüpft sein
function close_form(argument) {
    scheduler.endLightbox(false, custom_form);
}

Related sample:  Fully custom lightbox

Nach oben