Работа с данными

Загрузка данных

Webix Scheduler ожидает общий URL для загрузки и сохранения событий и календарей:

view: "scheduler", url: "remote/data"

Более подробную информацию о роутах и параметрах читайте в этой статье.

Если у вас нет бэкенд сервера или вам необходима нестандартная логика работы, вы можете переписать её.

Структура данных

События

Scheduler ожидает JSON данные, где элементы массива (объекты) содержат следующие поля:

  • start_date (string) - начальная дата события;
  • end_date (string) - конечная дата события;
  • id (string, number) - ID события;
  • text (string) - название события (текст события на сетке событий);
  • details (string) - подробности события;
  • color (string) - HEX цвет события;
  • section (string, number) - ID секции, к которой принадлежит событие в режиме timeline
  • units (string, number) - ID/IDs категорий, к которым принаждежит событие в режиме units
  • calendar (number) - ID календаря события (если события не прикреплено к календарю, данное поле отсутствует);
  • all_day (number) - указывает на то, что событие длится весь день. Если событие не должно длиться весь день, это поле отсутствует;
  • recurring (string) - формат iCal. Более подробно о правилах многократных событий читайте здесь;
  • origin_id (string, number) - необязательный параметр. ID исходного события, которое присваивается подсобытию после редактирования определённого повторения.

JSON example

{
  "start_date": "2018-06-21 00:00:00",
  "end_date": "2018-07-05 00:00:00",
  "id": 17,
  "all_day": 1,
  "text": "Wimbledon",
  "section": "2",
  "units": "1,2",
  "details": "Wimbledon\nJune 21, 2014 - July 5, 2014",
  "color": "#CF89D5",
  "recurring": "FREQ=YEARLY;BYMONTH=1;BYMONTHDAY=1",
  "calendar": 2
}

Календари

  • id (string, number) - ID календаря
  • text (string) - название календаря
  • color (string) - цвет календаря (hex код)
  • active (number) - статус календаря со следующими возможными значениями:
    • 0 - календарь неактивен (чекбокс не выбран)
    • 1 - календарь активен (чекбокс выбран).

JSON пример

{
  text: "Personal", 
  color: "#997CEB", 
  active: 1, 
  id: "1"
}

Категории

Категории загружаются, когда Scheduler переходит в режим units.

  • id (string, number) - unit ID
  • value (sting) - unit name.

Секции

Секции загружаются, когда Scheduler переходит в режим timeline.

  • id (string, number) - ID секции
  • text (string) - текст секции.

JSON пример

{
  id: "1"
  text: "Section 1", 
}

Data Services

У Scheduler есть следующие сервисы для работы с данными:

1. Local Data

  • хранит данные в коллекциях на клиентской стороне
  • предоставляет методы для получения и перерисовки событий
  • предоставляет методы для получения и перерисовки календарей
const local = $$("scheduler").getService("local");
// получаем коллекцию калндарей
local.calendars().then(calendars => {
   // ваш код
});

2. Operations

  • предоставляет методы для добавления/удаления/обновления событий и календарей
const ops = $$("scheduler").getService("operations");
ops.addCalendar(data); // adds calendar

3. Backend

  • предоставляет методы запросов к серверу для получения данных и сохранения изменений
const back = $$("scheduler").getService("backend");
back.events().then(data => console.log(data));

Смотрите исходную папку models, чтобы познакомиться с сигнатурами методов.

Операции с данными

Как получить событий

Все события хранятся в DataCollection. Чтобы получить коллекцию, вызовите метод events у сервиса Local. Метод принимает 2 параметра:

  • sync (boolean) - в случае true, мы подразумеваем, что события загружены в коллекцию и промис не требуется
  • force (boolean) - в случае true, коллекция загрузит данные с сервера.
// получаем коллекцию событий
$$("scheduler").getService("local").events()
  .then(events => {
    // ваш код
  });

С помощью сериализации можно получить массив событий:

const local = $$("scheduler").getService("local");
local.events().then(events => {
  const evs = events.serialize(); // получаем массив событий
  /*[
      {
        calendar: 2,
        color: "#91E4A6",
        details: " Leipzig, GER",
        end_date: new Date(),
        id: "1",
        section: "2",
        units: "2",
        start_date: new Date(),
        text: " Zentralstadion - Leipzig"
      },
      // другие событий
    ]
  */
 
});

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

Чтобы получить события за определённый промежуток времени, вызовите метод сервиса Local - getEvents(). Метод принимает 2 параметра:

  • start (object) - начальная дата периода
  • end (object) - конечная дата периода.
let start = webix.Date.monthStart(new Date(2018, 4, 21));
let end = webix.Date.add(start, 1, "month", true);
 
const events = $$("scheduler").getService("local").getEvents(start, end);

Метод возвращает промис с массивом событий между указанными датами (включительно):

[
  {
    calendar: 1,
    color: "#CF89D5",
    details: " Milan, Italy",
    end_date: new Date(),
    id: "16",
    section: "1",
    units: "2",
    start_date: new Date(),
    text: " Comunale Giuseppe Meazza - San Siro",
  },
  // другие объекты событий
]

Как получить календари

Чтобы получить коллекцию всех календарей, вызовите метод calendars сервиса Local. Метод принимает 2 параметра:

  • sync (boolean) - в случае true, мы подразумеваем, что календари загружены в коллекцию и промис не требуется
  • force (boolean) - в случае true, коллекция загрузит данные с сервера.
// получаем коллекцию календарей
$$("scheduler").getService("local").calendars()
  .then(calendars => {
    // ваш код
  });

С помощью сериализации можно получить массив календарей:

const local = $$("scheduler").getService("local");
local.calendars().then(calendars => {
  const cals = calendars.serialize(); // получаем массив календарей
  /*
    [
      {text: "Personal", color: "#997CEB", active: 1, id: "1"},
      // другие календари
    ]
  */
});

Как получить секции

Коллекция доступна, только если включено свойство timeline.

Чтобы получить коллекцию секций, вызовите метод sections сервиса Local. Метод принимает 2 параметра:

  • sync (boolean) - в случае true, мы подразумеваем, что секции загружены в коллекцию и промис не требуется
  • force (boolean) - в случае true, коллекция загрузит данные с сервера.
// получаем коллекцию секций
$$("scheduler").getService("local").sections()
  .then(sections => {
    // ваш код
  });

С помощью сериализации можно получить массив секций:

const local = $$("scheduler").getService("local");
local.sections().then(sections => {
  const sectionsArray = sections.serialize(); // получаем массив секций
  /*
    [
      {text: "Section 1", id: "1"},
      // другие секции
    ]
  */
});

Как получить категории

Коллекция доступна, только если включено свойство units.

Чтобы получить коллекцию секций, вызовите метод units сервиса Local. Метод принимает 2 параметра:

  • sync (boolean) - в случае true, мы подразумеваем, что категории загружены в коллекцию и промис не требуется
  • force (boolean) - в случае true, коллекция загрузит данные с сервера.
// получаем коллекцию категорий
$$("scheduler").getService("local").units()
  .then(units => {
    // ваш код
  });

С помощью сериализации можно получить массив категорий:

const local = $$("scheduler").getService("local");
local.units().then(units => {
  const unitsArray = units.serialize(); // получаем массив секций
  /*
    [
      {value: "Sports", id: "1"},
      // другие категории
    ]
  */
});

Related sample:  Scheduler: Data Operations

Наверх