Fully Custom Lightbox

To specify for the scheduler a fully custom lightbox you need to redefine the showLightbox method:

scheduler.showLightbox = function(id){
    // id - id of event
    ... code to show any custom form ...
}

There are 2 helper methods you can use to simplify implementation:

startLightbox - shows a custom lightbox in the specified html container centered on the screen.
endLightbox - closes the lightbox

Let's assume that you have the #custom_form HTML container somewhere on the page. Then, to implement a custom lightbox you can use this:

var custom_form = document.getElementById("custom_form");
 
scheduler.showLightbox = function(id){
    var ev = scheduler.getEvent(id);
    scheduler.startLightbox(id, custom_form );
    ...'here you need to set values in the form'...
    //document.getElementById("some_input").value = ev.text;
}
//needs to be attached to the 'save' button
function save_form() {
    var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
    ...'here you need to retrieve values from the form'...
    //ev.text = document.getElementById("some_input").value;
    scheduler.endLightbox(true, custom_form);
}
//needs to be attached to the 'cancel' button
function close_form(argument) {
    scheduler.endLightbox(false, custom_form);
}

Related sample: Fully custom lightbox