Anpassen der "Select"- und "Edit"-Leisten

dhtmlxScheduler ermöglicht es Ihnen, eine individuelle Sammlung von Buttons sowohl für die Edit- als auch die Select-Leiste zu konfigurieren.

Die Select-Leiste

Standardmäßig enthält die Select-Leiste 3 Buttons ('Details', 'Edit', 'Delete'), die über die Option icons_select definiert werden.

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

Anwendungsbeispiel

Hier sehen Sie eine Beispiel-Select-Leiste wie im untenstehenden Bild dargestellt:

Ein neuer Button mit dem Namen Location wurde zu den bestehenden Buttons hinzugefügt.

Die Schritte hierfür sind:

• Aktualisieren Sie icons_select wie folgt:

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

• Definieren Sie das Label für den neuen Button:

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

• Weisen Sie die CSS-Klasse für den Button zu:

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

• Definieren Sie den Click-Handler für den Button:

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

Hier enthält scheduler._click.buttons die onClick-Handler für die Buttons der Leiste. Der Schlüssel 'location' entspricht dem Button-Namen aus icons_select, jedoch ohne das Präfix 'icon_'.

Die Edit-Leiste

In der Regel verfügt die Edit-Leiste über 2 Buttons ('Save' und 'Cancel'), die über die Option icons_edit konfiguriert werden.

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

Anwendungsbeispiel

Betrachten Sie die untenstehende Edit-Leiste:

Zusätzlich zu den Buttons Save und Cancel wurde ein neuer Info-Button hinzugefügt. Das Vorgehen ist:

• Aktualisieren Sie icons_edit wie folgt:

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

• Setzen Sie das Label für den neuen Button:

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

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

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

• Geben Sie den Click-Handler für den Button an:

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

Auch hier enthält scheduler._click.buttons die Click-Handler für die Buttons, und 'custom' entspricht dem Button-Namen aus icons_edit nach Entfernen des Präfixes 'icon_'.

Dynamisches Ändern der Elemente der Leisten

Es ist möglich, die Buttons der Edit- und Select-Leisten dynamisch anhand bestimmter Bedingungen zu ändern.

Wenn Ihre Events beispielsweise eine boolesche Eigenschaft important haben, die angibt, dass das Event kritisch ist und nicht gelöscht werden soll, können Sie den 'delete'-Button in der Select-Leiste entsprechend ein- oder ausblenden. So geht’s:

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

Nach oben