Кастомизация панелей "Select" и "Edit"

dhtmlxScheduler позволяет настраивать собственный набор кнопок как для панели выбора (select bar), так и для панели редактирования (edit bar).

Грид выбора (select bar)

По умолчанию грид выбора содержит 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"
];

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

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_select без префикса 'icon_'.

Грид редактирования (edit bar)

Обычно грид редактирования содержит 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 содержит обработчики кликов для кнопок, а 'custom' соответствует названию кнопки из icons_edit без префикса 'icon_'.

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

Можно динамически изменять кнопки на панелях редактирования и выбора в зависимости от определённых условий.

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

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

Наверх