Настройка 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
• dynamic (string) - включает режим динамической загрузки событий при навигации ("day", "week", "month", "year"). Не зависит от текущего режима работы mode (см. выше), если установлено одно из перечисленных значений. Также может быть задан со значением true. В этом случае динамическая загрузка зависит от заданного режима работы mode и видимых дат
• serverUTC (boolean) - если true, позволяет парсить входящие UTC даты в местное время и сохранять обратно в UTC формат
• 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.

Наверх