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,