Two or more timedate selectors in one lightbox - how to make?

Scheduler Javascript
#1

Hi everybody! Is there a way to place 2 or more timedate selectors on one lightbox? When i try to do it, saving does not work. For example, i put this :

{name:“anothertime”, height:20, type:“time”, map_to:“auto” },
{name:“time”, height:72, type:“time”, map_to:“auto”}

and no luck, and errors in browser’s console…Can somebody give me an example of this or how can i implement it?

#2

Hello @AlexMav ,

Basically, the scheduler expects only the single default time section(as it checks time by the input selectors), and there is no way to have two default time sections at the same time.
But you can implement it with custom time control:
https://docs.dhtmlx.com/scheduler/custom_lightbox_editor.html

Code example:

scheduler.config.lightbox.sections=[    
  { name:"description", height:50, type:"textarea", map_to:"text", focus:true},
  { name:"secondary_time", map_to:"auto", type:"my_editor" , focus:true},
  { name:"time", map_to:"time", type:"time" , focus:true},
];

Here is a demo, that uses the default time section plus the custom one:
https://snippet.dhtmlx.com/5/cc17d4ef6
(you can use two custom time controls if you want them to be the same).

#3

Good answer, thank you, but i also made the same with building one more template inside dhtmlxscheduler.js, for example, one simple date with datepicker:

template2:{render:function(t){var e=g._lightbox_controls.defaults.template2,i=e?e.height:30;return"<input class='dhx_cal_ltext dhx_cal_template2' data-datepicker onkeypress='return false;' type='text' name='"+t.name+"' style='height:"+(t.height||i||30)+"px;'>"},set_value:function(t,e,i,n){t.value=e||""},get_value:function(t,e,i){return t.value||""},focus:function(t){}}

with an additional script that founds “data-datepicker” attrubute and adds a date input

or:

template3:{render:function(t){var e=g._lightbox_controls.defaults.template3,i=e?e.height:30;return"<input class='dhx_cal_ltext dhx_cal_template3' type='number' min='0' max='24' maxlength='2' pattern='[0-9]' placeholder='0' value='0' onkeypress='return false;' name='"+t.name+"' style='height:"+(t.height||i||30)+"px;'>"},set_value:function(t,e,i,n){t.value=e||""},get_value:function(t,e,i){return t.value||""},focus:function(t){}}

for an input with numbers only. So, my approach is to add new templates, but anyway, your suggestion is also good, thanks

1 Like