Select

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"}
];

Basic select editor in the lightbox

Initialisierung

Um das Select-Steuerelement in die Lightbox einzubinden, gehen Sie wie folgt vor:

1. Binden Sie den Abschnitt in die Lightbox-Konfiguration ein:

scheduler.config.lightbox.sections = 
    { name:"description", ... },
    { name:"alert", height:40,map_to:"type",type:"select", options:alert_opts},
    { name:"time", ...}
];

2. Definieren Sie das Label für den Abschnitt:

scheduler.locale.labels.section_select = "Alert";

Basic select editor in the lightbox

Eigenschaften

Hier sind einige wichtige Eigenschaften, die üblicherweise für das 'select'-Steuerelement gesetzt werden (die vollständige Liste finden Sie hier):

name	(string) Der Name des Abschnitts
height	(number) Die Höhe des Abschnitts
map_to	(string) Der Name der Daten-Eigenschaft, auf die der Abschnitt abgebildet wird
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) Der Typ des Steuerelements, das im Abschnitt verwendet wird
options	(Array von Objekten) Definiert die Auswahlmöglichkeiten für Steuerelemente wie 'select', 'multiselect', 'radio' und 'combo'. Jedes Objekt repräsentiert eine Option und enthält: key - (string) Die Kennung der Option, die mit der Daten-Eigenschaft des Events abgeglichen wird label - (string) Die angezeigte Bezeichnung der Option
onchange	(function) Die Event-Handler-Funktion, die bei Änderungen am Steuerelement ausgelöst wird Linking select controls in the lightbox

Befüllen des Steuerelements mit Daten

Typischerweise werden Werte für das Select-Steuerelement über den options-Parameter gesetzt:

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

Jedes Element im options-Array muss diese beiden erforderlichen Eigenschaften enthalten:

• key - Die Kennung der Option
• label - Die angezeigte Bezeichnung der Option

Optionen dynamisch ändern

Um Optionen vom Server zu laden, weisen Sie die options-Eigenschaft dem von der serverList-Methode zurückgegebenen Wert zu:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"type",map_to:"type",type:"select",options:scheduler.serverList("type")},
    {name:"time", ...}
];

scheduler.load("./data/types");

Hinweis

Details zur serverList-Methode finden Sie im zugehörigen Artikel.

Die Datenantwort für die load-Methode sollte eine Collection enthalten, die dem Namen der Serverliste entspricht, und als JSON wie hier formatiert ist:

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

Populating a select editor from the server

Die parse-Methode kann ebenfalls verwendet werden, um Optionen nach der Initialisierung des Schedulers zu laden.

Um die Optionen eines Steuerelements mit neuen Werten zu aktualisieren, kann die updateCollection-Methode verwendet werden:

scheduler.updateCollection("type", [      
    {"key":"1","label":"Interview"},
    {"key":"2","label":"Performance review"},
    {"key":"3","label":"Request"}
]);

Weitere Informationen finden Sie im Artikel scheduler.serverList.