Change lightbox timepicker

Scheduler Javascript
#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,

Using dhx grid in scheduler lightbox
#3

Ok thanks.

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

BR
René

#4

Hello @IFM ,

Unfortunately there is no such ready demo, as it’s quite complicated to combine the default time section with the Suite component,
but you can implement it by your own using the custom ligthbox control functionality. You can find code of the default time section in scheduler sources, in the form_blocks definition:

and use it as a code reference for your solution.