Настройка панелей "Select" и "Edit"

dhtmlxScheduler предоставляет возможность определить свой набор кнопок для панелей редактирования и выбора.

Панель выбора

По умолчанию панель выбора содержит 3 кнопки ('Details', 'Edit', 'Delete'), которые задаются конфигурационной опцией icons_select.

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

Пример использования

Рассмотрим панель выбора, изображенную на рисунке ниже:

К существующим кнопкам мы добавили новую — Location.

Наши шаги:

• Переопределите icons_select как показано ниже:

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

примечание

Примечание: любая кнопка должна начинаться с "icon_"

• Установите текст метки для новой кнопки:

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

• Установите CSS‑класс для кнопки:

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

• Укажите обработчик кликов по кнопке:

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

где scheduler._click.buttons содержит коллекцию обработчиков onClick для кнопок панели. 'location' — имя кнопки, заданное в icons_edit после части 'icon_'.

Панель редактирования

Как правило, панель редактирования содержит 2 кнопки ('Save' и 'Cancel'), которые задаются конфигурационной опцией icons_edit.

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

Пример использования

Рассмотрим панель редактирования, изображенную на рисунке ниже:

К кнопкам Save и Cancel мы добавили новую кнопку - Info. Вот наши шаги:

• Переопределите icons_edit как в примере:

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

• Установите текст метки для новой кнопки:

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

• Установите CSS‑класс для кнопки:

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

• Укажите обработчик кликов по кнопке:

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

где scheduler._click.buttons содержит коллекцию обработчиков onClick для кнопок панели. 'custom' — имя кнопки, заданное в icons_edit после части 'icon_'.

Динамическая смена элементов панелей

Кнопки панелей редактирования и выбора могут динамически изменяться в зависимости от условий.

Например, у ваших событий есть пользовательское булево свойство important, которое указывает на то, что событие важно и не может быть удалено пользователем. В зависимости от значения этого свойства вы можете скрыть/показать кнопку 'delete' в панели выбора. Чтобы реализовать такое поведение, используйте следующую технику:

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;
});