Anpassen der "Select" und "Edit" Leisten

dhtmlxScheduler bietet die Möglichkeit, eine benutzerdefinierte Menge von Schaltflächen für die Bearbeitungs- und Auswahlleisten zu definieren.

Die Auswahlleiste

Standardmäßig enthält die Auswahlleiste drei Schaltflächen ('Details', 'Bearbeiten', 'Löschen'), die durch die icons_select Konfigurationsoption festgelegt werden.

scheduler.config.icons_select = [
   "icon_details",
   "icon_edit",
   "icon_delete"
];

Verwendungsbeispiel

Betrachten wir die unten gezeigte Auswahlleiste:

Zu den vorhandenen Schaltflächen haben wir eine neue hinzugefügt - Location.

Hier sind unsere Schritte:

• Definieren Sie icons_select wie folgt:

scheduler.config.icons_select = [
   "icon_location",
   "icon_details",
   "icon_edit",
   "icon_delete"
];

Hinweis

Hinweis: Jeder Button muss mit "icon_" beginnen.

• Legen Sie die Beschriftung für den neuen Button fest:

scheduler.locale.labels.icon_location = "Location";

• Legen Sie die CSS-Klasse für den Button fest:

.dhx_menu_icon.icon_location{
  background-image: url('location_icon.png');  
} 

• Definieren Sie den Handler, der Klicks auf den Button verarbeitet:

scheduler._click.buttons.location = function(id){
   some_function(id);
};

wobei scheduler.click.buttons die Sammlung der onClick-Handler für die Buttons der Leiste enthält. 'location' ist der Name des Buttons, der in icons_edit nach dem 'icon'-Teil festgelegt wird.

Die Bearbeitungsleiste

Im Allgemeinen enthält die Bearbeitungsleiste zwei Schaltflächen ('Speichern', 'Abbrechen'), die durch die icons_edit Konfigurationsoption festgelegt werden.

scheduler.config.icons_edit = [
   "icon_save",
   "icon_cancel"
];

Verwendungsbeispiel

Betrachten wir die unten gezeigte Bearbeitungsleiste:

Zu den Buttons Speichern und Abbrechen haben wir eine neue hinzugefügt – Info. Hier sind unsere Schritte:

• Definieren Sie icons_edit wie folgt:

scheduler.config.icons_edit = [
   "icon_custom",
   "icon_save",
   "icon_cancel"
];

• Legen Sie die Beschriftung für den neuen Button fest:

scheduler.locale.labels.icon_custom = "Info";

• Legen Sie die CSS-Klasse für den Button fest:

.dhx_menu_icon.icon_custom{
  background-image: url('info_icon.png');  
} 

• Definieren Sie den Handler, der Klicks auf den Button verarbeitet:

scheduler._click.buttons.custom = function(id){
   some_function;
};

wobei scheduler.click.buttons die Sammlung der onClick-Handler für die Buttons der Leiste enthält. 'custom' ist der Name des Buttons, der in icons_edit nach dem 'icon'-Teil festgelegt wird.

Dynamische Änderung der Leisten-Elemente

Die Buttons der Bearbeitungs- und Auswahlleisten können je nach Bedingung dynamisch geändert werden.

Zum Beispiel besitzen Ihre Ereignisse eine benutzerdefinierte boolesche Eigenschaft important, die angibt, ob das Ereignis wichtig ist und vom Benutzer nicht gelöscht werden kann. Je nach Wert dieser Eigenschaft möchten Sie den 'delete'-Button in der Auswahlleiste ausblenden bzw. anzeigen. Um ein solches Verhalten zu ermöglichen, verwenden Sie folgende Vorgehensweise:

scheduler.attachEvent("onClick", function(id){
    const event = scheduler.getEvent(id);
    if (event.important)
        scheduler.config.icons_select = ["icon_details"];
    else
        scheduler.config.icons_select = ["icon_details", "icon_delete"];

    return true;
});