Настройка Scheduler

Так как Scheduler - это приложение на базе Webix Jet, оно состоит из отдельных Webix компонентов. Эти компоненты можно переопределить или же работать с отдельными настройками чата.

Базовая конфигурация

Чтобы настроить общую конфигурацию виджета, используйте следующие свойства:

• date (object) - изначальная дата для виджета (текущая дата по умолчанию)
• mode (string) - текущий режим работы. Возможные значения:
  • "day"
  • "week"
  • "month" (по умолчанию)
  • "year"
  • "agenda"
  • "timeline" (доступно, если свойство timeline включено)
  • "units" (доступно, если свойство units включено)
• readonly (boolean) - если true, блокирует редактирование календарей и событий. По умолчанию false
• calendars (boolean) - если false, блокирует возможность добавлять события в календари (группы событий). По умолчанию true
• units (boolean) - позволяет отображать события дня, сгруппированные по категориям
• timeline (boolean) - позволяет работать с таймлайном
• timelineMode (string) - определяет режим просмотра для таймлайна ("day", "week" by default, "month")
• recurring (boolean) - если false, не поддерживает повторяющиеся события. По умолчанию true
• serverUTC (boolean) - если true, позволяет парсить входящие UTC даты в местное время и сохранять обратно в UTC формат
• dynamic (string) - включает режим динамической загрузки событий при навигации ("day", "week", "month", "year"). Не зависит от текущего режима работы mode (см. выше)
• compact (boolean) - компактный режим. По умолчанию не выставлен (undefined);
• compactWidth (number) - ширина виджета, при которой он переключается в компактный режим. (compact должен быть true). По умолчанию 780
• url (string) - URL для загрузки данных
• locale (string, object) - название текущего языка или объект с языковыми настройками
• override - Map с изменёнными внутренними классами и сервисами. Используется при кастомизации.

Реактивные свойства

Кроме базовых свойств, у Scheduler есть реактивные, которые хранят состояние приложения и позволяют разработчикам отслеживать его изменения:

• active (array) - массив с ID активных календарей;
• date (object) - объект даты JavaScript;
• mode (string) - текущий режим работы;
• readonly (boolean) - текущее состояние "readonly" (true или false);
• selected (object) - выбранное событие. Включает в себя следующие поля:
  • id (string, number) - ID события;
  • date (string) - (для повторяющихся событий) ID конкретного повторения;
  • node (object) - HTML узел выбранного события (повторения) при выборе этого события.

Получить текущее состояние компонента можно с помощью метода getState():

webix.ui({
    view: "scheduler",
    date: new Date(2018, 4, 21, 0, 0, 0),
    url: "https://docs.webix.com/calendar-backend/",
});
 
$$("scheduler").getState();
 
/*
{
    active: [...], date: new Date(),
    mode: "month", readonly: false,
    selected: {id: "30", date: "1526974200000_30", node:HTMLElement }
}
*/

Отслеживание изменений реактивных свойств

Следить за изменениями реактивных свойств можно с помощью обработчика $observe:

webix.ui({
  view: "scheduler",
  id: "myscheduler",
  date: new Date(2018, 4, 21, 0, 0, 0),
  url: "https://docs.webix.com/calendar-backend/",
  on: {
    onInit: app => {
      const state = app.getState();
      // выводит режим работы и выбранное событие
      state.$observe("mode", v => webix.message(`You are in the "${v}" display mode!`));
 
      state.$observe("selected", v => {
        if(v !== null) webix.message(`The ID of the selected event is ${v.id}`)
      });
    }
  }
});

Related sample:  Scheduler: Listening to State Changes

В примере выше, текущий state доступен через экземпляр JetApp, который, в свою очередь, доступен в обработчике onInit.

Наверх