Полностью настраиваемый лайтбокс

Чтобы создать полностью настраиваемый лайтбокс для планировщика, необходимо переопределить метод @scheduler_showlightbox:

scheduler.showLightbox = function(id){
    // id - id события
    ... код для отображения любой пользовательской формы ...
}

Существует два вспомогательных метода, которые могут упростить эту задачу:

• startLightbox - отображает пользовательский лайтбокс внутри указанного html-контейнера, центрируя его на экране.
• endLightbox - закрывает лайтбокс

Предположим, что у вас есть HTML-контейнер с идентификатором #custom_form где-то на странице. Чтобы реализовать пользовательский лайтбокс, вы можете сделать следующее:

var custom_form = document.getElementById("custom_form");
 
scheduler.showLightbox = function(id){
    var ev = scheduler.getEvent(id);
    scheduler.startLightbox(id, custom_form );
    ...'здесь необходимо установить значения в форме'...
    //document.getElementById("some_input").value = ev.text;
}
// должна быть связана с кнопкой 'save'
function save_form() {
    var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
    ...'здесь необходимо получить значения из формы'...
    //ev.text = document.getElementById("some_input").value;
    scheduler.endLightbox(true, custom_form);
}
// должна быть связана с кнопкой 'cancel'
function close_form(argument) {
    scheduler.endLightbox(false, custom_form);
}

Related sample:  Fully custom lightbox

Наверх