var alert_opts = [
    { key: 1, label: 'None' },
    { key: 2, label: 'On start date' },
    { key: 3, label: '1 day before' }
scheduler.locale.labels.section_select = 'Alert';
scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"select", height:40, map_to:"type", type:"select", options:alert_opts},
    { name:"time", height:72, type:"time", map_to:"auto"}

Related sample:  Basic select editor in the lightbox


To add the Select control to the lightbox, follow these steps:

  1. Add the section to the lightbox configuration:
    scheduler.config.lightbox.sections = 
        { name:"description", ... },
        { name:"alert", height:40,map_to:"type",type:"select", options:alert_opts},
        { name:"time", ...}
  2. Set the label for the section:
    scheduler.locale.labels.section_select = "Alert";

Related sample:  Basic select editor in the lightbox


The following properties are mostly important and commonly set for the 'select' control (see the full list here):

Populating the control with data

Generally, to set values for the Select control you should use the options parameter:

scheduler.config.lightbox.sections = 
    {   name:"alert", type:"select", 
            { key: 1, label: 'None'},
            { key: 2, label: 'On start date'},
            { key: 3, label: '1 day before'}

Items in the options parameter must have 2 mandatory properties:

  • key - the option's id
  • label - the option's label

Changing options dynamically

To populate the control from the server, set the options option to the value returned by the serverList method:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"time", ...}

The details on the serverList method are given in the related article.

The data response for the load method should contain a collection with the server list name specified in JSON of the following format:

          "start_date":"2019-03-02 15:00:00",
          "end_date":"2019-03-04 16:00:00",
          "start_date":"2019-03-02 17:00:00",
          "end_date":"2019-03-04 18:00:00",
          "text":"Performance review",
   "collections": {      "type":[               {"value":"1","label":"Interview"},         {"value":"2","label":"Performance review"},         {"value":"3","label":"Request"}      ]   }}

Related sample:  Populating a select editor from the server

The parse method can be also used if you need to load options after initialization of the scheduler.

In case you need to update the specified options of the control with new ones, you can use the updateCollection method:

scheduler.updateCollection("type", [      
    {"key":"2","label":"Performance review"},

Check the details in the scheduler.serverList article.

Back to top