How to get Lightbox to pre-popolate drop-down lists

I have this data record coming in from my server-side MySQL DB:
// load the calendar events from the database
scheduler.parse([
{ id:1, start_date:“03/17/2017 14:00”, end_date:“03/17/2017 19:30”, text:“Smith, Joe”, code:“HOURS”, notes:“Test 3”, color:“green”, textColor:“black”, rec_type:“”, eventPID:“0”, eventLength:“0”, },
],“json”);

I have this Lightbox:
var availability_options = [
{ key: 1, label: ‘ANY’ },
{ key: 2, label: ‘HOURS’ },
{ key: 4, label: ‘OFF’ }
];

              scheduler.locale.labels.section_employees = 'Employees:';
              scheduler.locale.labels.section_code = 'Availability:';
              scheduler.locale.labels.section_notes = 'Comments/Notes:';
              scheduler.locale.labels.section_time = 'Start - End:';
              scheduler.config.lightbox.sections = [

{ name:“employees”, height:40, map_to:“text”, type:“select”, options:scheduler.serverList( “employees”, [
{ key: 193, label: ‘Jones, Sally’ },
{ key: 020, label: ‘Smith, Joe’ },
] ) },
{ name:“code”, height:40, map_to:“code”, type:“select”, options:availability_options, focus:true },
{ name:“notes”, height:40, map_to:“notes”, type:“textarea” },
//{ name:“recurring”, height:72, type:“recurring”, map_to:“rec_type”, button:“recurring”},
{ name:“time”, height:72, type:“time”, map_to:“auto”, time_format:[“%H:%i”] }
];

              scheduler.templates.event_text = scheduler.templates.event_bar_text = function( start, end, event ){
                var employees = scheduler.serverList( 'employees' );
                for( var i=0; i<employees.length; i++ ){
                  if( employees[i].key == event.employees ){
                    return employees[i].label;
                  }
                }
                return '';
              };

How can I get the map_to:"text" element to recognize the code from the database table and set the select option to Smith, Joe checked? How can I get the map_to:“code” element to recognize the code from the database table and set the select option to HOURS checked?
How can I get the `map_to:“auto” element to recognize the code from the database table and set the start select option to 14:00 checked and the end select option to 19:30 checked?

screen_shot2.png808×588 34 KB

Hi,

Value of map_to property must match value (key) of the selected option, e.g.

event: { id:1, code: 2, ...}

and options:

var availability_options = [ { key: 1, label: 'ANY' }, { key: 2, label: 'HOURS' },// will be selected { key: 4, label: 'OFF' } ];
or

event: { id:1, code: 'HOURS', ...}

and options:

As for the last item:

Looks like something goes wrong when you hide time selectors using time_format settings.
We’ll look into it, meanwhile you can remove time_format setting from the time control and hide selects from code:

scheduler.attachEvent("onLightbox", function(){ var time = scheduler.formSection("time"); var selects = time.node.querySelectorAll("select"); for(var i = 0; i < selects.length; i++){ if(i != 0 && i != 4){// show only the first and the third selectors (hours) selects[i].style.display = "none"; } } });
Demo with all changes: docs.dhtmlx.com/scheduler/snippet/11fe29c8

Excellent @Aliaksandr

I spent most of the day digesting, testing and implementing my calendar app based on the demo you produced. Thank you for that!

I got everything working except the fine tuned details of my Time selector. I really want to be able to use the time_format:["%H:%i"] attribute in the pull down in the name:"time", if possible.

I’d like to leave this post open to hear back from you on whether we can format the time drop downs to include AM/PM

Thanks again for helping me out. You’ve demonstrated that the Scheduler plugin is highly robust and extremely comprehensive and a mature developed product to meet most all/any needs from a calendar application.

Just checking in @Aliaksandr to see if there is a solution for this.

Hi,
sorry for a delay

I got everything working except the fine tuned details of my Time selector. I really want to be able to use the time_format:["%H:%i"] attribute in the pull down in the name:"time", if possible.

We’ll check whether it can be done quickly from our end. If so, I’ll be able to give you an update in a day or two. Although modifying time selectors from onLightbox is also a viable approach

I’d like to leave this post open to hear back from you on whether we can format the time drop downs to include AM/PM

It’s defined via time_picker template, which I thought I’ve seen in code samples you posted before
docs.dhtmlx.com/scheduler/api__ … plate.html
Following should do:

scheduler.templates.time_picker = scheduler.date.date_to_str("%g:%i %A");
Or did you mean something else?
docs.dhtmlx.com/scheduler/settings_format.html

Excellent, works perfectly and is exactly what I was hoping to be able to do.

Thanks @Aliaksandr.

This post is solved.