Change lightbox timepicker


#1

Hello,

is it possiple to use your timepicker in the lighbox?
https://dhtmlx.com/docs/products/dhtmlxTimePicker/

BR
René


#2

Hello @IFM,

Yes, you can use the Suite calendar in the Scheduler lightbox as a custom control:
https://docs.dhtmlx.com/scheduler/custom_lightbox_editor.html

It’s a little bit complicated, as you have to destroy both calendars(start/end) before each lightbox opens, in order to make them work with the current editing event, so the calendars creating function may look like this one:

function initCals(){
    if(calendarStart){
    calendarStart.destructor()
    calendarEnd.destructor()
    }
    calendarStart = new dhx.Calendar("timepickerStart", {
    timePicker: true, 
    css: "dhx_widget--bordered"
    });
    calendarEnd = new dhx.Calendar("timepickerEnd", {
    timePicker: true,
    css: "dhx_widget--bordered"
    });
}

After that, you will be able to create calendars in the form_blocks as a custom control and recreate them on each lightbox open, from the onLightbox event.

The code may look like follows:

let calendarStart;
let calendarEnd;

scheduler.attachEvent("onLightbox", function (id){
    initCals();
    var ev = scheduler.getEvent(id)
    calendarStart.setValue(new Date(ev.start_date));
    calendarEnd.setValue(new Date(ev.end_date));
}); 
function initCals(){
    if(calendarStart){
    calendarStart.destructor()
    calendarEnd.destructor()
    }
    calendarStart = new dhx.Calendar("timepickerStart", {
    timePicker: true, 
    css: "dhx_widget--bordered"
    });
    calendarEnd = new dhx.Calendar("timepickerEnd", {
    timePicker: true,
    css: "dhx_widget--bordered"
    });
}
scheduler.form_blocks["my_editor"]={
render:function(config){ // config- section configuration object
    return `<div class='cont'><div id="timepickerStart" style='height:300px; width: 50%'></div> <div id="timepickerEnd" style='height:300px; width: 50%'></div>`;
},
set_value:function(node,value,ev,config){     
    initCals();
},
get_value:function(node,ev,config){
    ev.start_date = calendarStart.getValue(true);
    ev.end_date = calendarEnd.getValue(true);
},
focus:function(node){
// node - HTML object related to HTML defined above
//node.querySelector("textarea").focus();
}
};

Here is a demo:
https://snippet.dhtmlx.com/ogdj6cfq

Kind regards,


#3

Ok thanks.

It is not by chance that you have another example where only the time picker is replaced?

BR
René