Select

const 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 dem Lightbox hinzuzufügen, befolgen Sie diese Schritte:

1. Fügen Sie den Abschnitt zur Lightbox-Konfiguration hinzu:

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

2. Setzen Sie die Bezeichnung 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 lightbox):

name	(string) Der Name des Abschnitts
height	(number) Die Höhe des Abschnitts
map_to	(string) Der Name einer Daten-Eigenschaft, die dem Abschnitt zugeordnet wird
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) Die Art des Abschnitts-Steuerelements
options	(array of objects) Definiert die Optionen des Steuerelements (für 'select', 'multiselect', 'radio', 'combo'-Steuerungen). Jedes Objekt im Array definiert eine einzelne Option und nimmt folgende Eigenschaften an: key - (string) Die Option-ID. Dieses Attribut wird mit der Daten-Eigenschaft des Ereignisses verglichen, um Optionen Ereignissen zuzuordnen label - (string) Die Bezeichnung der Option
onchange	(function) Gibt die Funktion des 'onchange'-Ereignisses für den Abschnitts-Steuerung an Linking select controls in the lightbox

Das Steuerelement mit Daten befüllen

Allgemein sollten Sie zum Festlegen der Werte für das Select-Steuerelement den [options]-Parameter verwenden:

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'}
    ]},
    ...
];

Items im [options]-Parameter müssen zwei Pflicht-Eigenschaften besitzen:

• key - die Option-ID
• label - die Option-Bezeichnung

Optionen dynamisch ändern

Um das Steuerelement vom Server zu befüllen, setzen Sie die [options]-Option auf den von der [serverList]-Methode zurückgegebenen Wert:

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

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

Hinweis

Die Details zur serverList-Methode finden Sie im entsprechenden Artikel.

Die Datenantwort für die [load]-Methode sollte eine Sammlung enthalten, deren Name der Serverliste im JSON folgendem Format angegeben ist:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2027-03-02 15:00:00",
          "end_date":"2027-03-04 16:00:00",
          "text":"Interview",
          "type":"1"
      },
      {
          "id":"2",
          "start_date":"2027-03-02 17:00:00",
          "end_date":"2027-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"}/*!*/
      ]/*!*/
   }/*!*/
}

Die parse Methode kann auch verwendet werden, wenn Sie Optionen nach der Initialisierung des Schedulers laden möchten.

Wenn Sie die angegebenen Optionen des Steuerelements mit neuen Werten aktualisieren müssen, können Sie die updateCollection Methode verwenden:

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

Details finden Sie im Artikel scheduler.serverList (api/method/serverlist.md).