Перейти к основному содержимому

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

dhtmlxScheduler может загружать данные в нескольких форматах. Большинство приложений используют JSON. iCalendar (.ics) и XML также поддерживаются для совместимости или сценариев импорта.

Связанные руководства​

Загрузка данных из встроенного набора данных​

Чтобы загрузить данные из встроенного набора данных, используйте метод parse():

scheduler.init("scheduler_here", new Date(2027, 4, 1), "month");
...
scheduler.parse([
    { id: "1", text: "Meeting", start_date: "2027-05-11 14:00", end_date: "2027-05-11 17:00" },
    { id: "2", text: "Conference", start_date: "2027-05-15 12:00", end_date: "2027-05-18 19:00" },
    { id: "3", text: "Interview", start_date: "2027-05-24 09:00", end_date: "2027-05-24 10:00" }
]);

Связанные примеры​

Связанный API​

Связанные руководства​

Загрузка данных из файла​

Чтобы загрузить данные из файла, используйте метод load():

scheduler.init("scheduler_here", new Date(2027, 4, 1), "month");
...
scheduler.load("data.json"); // loading data from a file

Связанные примеры​

Связанный API​

Связанные руководства​

Загрузка данных с бэкенда​

Загружайте данные с вашего бэкенда, expose REST‑конечную точку, возвращающую события Scheduler в формате JSON.

  • Реализация на стороне сервера зависит от вашего стека технологий. Например, в Node.js можно добавить маршрут, который возвращает данные о событиях:
app.get("/data", async (request, response) => {
    const events = await db.event.find().toArray();
    response.json(events);
});
  • Со стороны клиента вызовите load() по URL данных:
scheduler.init("scheduler_here", new Date(2027, 4, 1), "month");
scheduler.load("/data");
примечание

Для сохранения изменений обратно на сервер используйте createDataProcessor(). См. Серверная интеграция.

Связанный API​

Связанные руководства​

Загрузка данных из нескольких источников​

Чтобы загрузить данные из нескольких источников, запросите необходимые конечные точки и объедините результаты перед вызовом parse():

Promise.all([
    fetch("/api/events").then((response) => response.json()),
    fetch("/api/holidays").then((response) => response.json())
]).then(([events, holidays]) => {
    scheduler.parse([...events, ...holidays]);
});

Связанный API​

Связанные руководства​

Свойства данных​

Обязательные свойства​

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

  • id - (string|number) уникальный идентификатор события
  • start_date - (date|string) начальная дата события
  • end_date - (date|string) конечная дата события
  • text - (string) заголовок/описание события

Формат даты по умолчанию для данных в формате JSON и XML — '%Y-%m-%d %H:%i' (см. спецификацию формата даты)

Чтобы изменить его, используйте конфигурационный параметр date_format.

scheduler.config.date_format = "%Y-%m-%d %H:%i";
...
scheduler.init("scheduler_here", new Date(2027, 4, 18), "week");

Пользовательские свойства​

Вы не ограничены обязательными свойствами, перечисленными выше, и можете добавлять любые пользовательские свойства к элементам данных. Дополнительные свойства данных будут сохраняться как строки и загружаться на клиентскую сторону, где вы сможете использовать их по мере необходимости.

См. примеры данных с пользовательскими свойствами здесь

Связанный API​

Связанные руководства​

Структура базы данных​

При настройке базы данных ожидаемая структура таблиц для событий Scheduler следующая:

  • таблица events — хранит события Scheduler
  • id - (string/int/guid) уникальный идентификатор события. Первичный ключ, автоинкремент.
  • start_date - (DateTime) начальная дата события, не может быть NULL.
  • end_date - (DateTime) конечная дата события, не может быть NULL.
  • text - (string) заголовок/описание события.

Если у вас есть повторяющиеся события, добавьте следующие поля:

  • rrule - (string) правило повторения в формате RFC-5545
  • duration - (number) продолжительность каждого появления в секундах
  • recurring_event_id - (string/int/guid) идентификатор родительской серии для изменённых/удалённых повторов
  • original_start - (DateTime) исходная дата начала редактируемого/удалённого случая
  • deleted - (boolean) помечает удалённые случаи

Вы можете определить любые дополнительные столбцы, они могут быть загружены на клиент и доступны для клиентского API.

Связанные руководства​

Динамическая загрузка​

По умолчанию dhtmlxScheduler загружает все данные сразу. Это может стать проблемой, когда вы используете большие наборы событий. В таких случаях можно использовать режим динамической загрузки и подгружать данные частями, необходимыми для заполнения текущей видимой области Scheduler.

Техника​

Чтобы включить динамическую загрузку, вызовите метод setLoadMode():

scheduler.setLoadMode("month");
scheduler.load("/api/events");

В качестве параметра метод принимает режим загрузки, который определяет размер загружаемых данных: day, week, month или year.

Например, если задать режим 'week', планировщик будет запрашивать данные только за текущую неделю и подгружать оставшиеся по требованию.

Как работают режимы загрузки​

Предопределённые режимы загрузки задают интервал загрузки данных в пределах установленного периода. Например, вы открываете Week View в scheduler для следующих дат: с 2027-02-02 по 2027-02-09. В зависимости от выбранного режима динамическая загрузка будет происходить следующим образом:

  • для режима "day"
scheduler.setLoadMode("day");

Планировщик будет запрашивать данные по дням, например: с 2027-02-02 по 2027-02-09.

  • для режима "month"
scheduler.setLoadMode("month");

Планировщик будет запрашивать данные по целым месяцам, например: с 2027-02-01 по 2027-03-01.

  • для режима "year"
scheduler.setLoadMode("year");

Планировщик будет запрашивать данные по целым годам, например: с 2027-01-01 по 2028-01-01.

В любом случае запрашиваемый интервал не будет меньше отрисованного.

Интервал загрузки определяет:

  • частоту вызовов динамической загрузки

Чем больше интервал загрузки, тем реже будут вызываться вызовы динамической загрузки. Планировщик хранит в памяти уже загружённую часть данных и не будет повторно запрашивать её.

  • длительность обработки отдельного запроса

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

Запрос​

Сгенерированные запросы выглядят так:

/api/events?from=DATEHERE&to=DATEHERE

где DATEHERE — корректное значение даты в формате, определённом опцией load_date

Связанный API​

Индикация загрузки​

Когда размер данных велик, полезно отображать индикатор загрузки. Он будет показывать пользователю, что приложение действительно что-то делает.

Чтобы включить индикатор загрузки для scheduler, установите свойство show_loading в true.

scheduler.config.show_loading = true;
...
scheduler.init("scheduler_here", new Date(2027, 4, 10), "month");
примечание

Чтобы изменить изображение спиннера загрузки, замените 'imgs/loading.gif' на ваше собственное изображение.

Загрузка данных с Timeline и Units секций с сервера​

При загрузке данных в Timeline и Units виды вам нужно задать массив секций, которые будут загружаться в представления.

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

  • во время инициализации вида Timeline вместо массива sections используйте метод serverList() и передайте имя коллекции в качестве аргумента:
scheduler.createTimelineView({
    ....
    y_unit: scheduler.serverList("sections"),
    ...
});
  • чтобы загрузить данные в scheduler, используйте метод load():
scheduler.load("data.json");

Если вы получаете данные вручную (например, чтобы добавить заголовки), вы можете передать тот же payload в parse():

fetch("/api/timeline")
    .then((response) => response.json())
    .then((payload) => scheduler.parse(payload, "json"));
  • во время реализации ответа данных scheduler на бэкенде используйте следующий формат:
data.json
{
    "data":[
        {
            "id":"1",
            "start_date":"2027-03-02 00:00:00",
            "end_date":"2027-03-04 00:00:00",
            "text":"dblclick me!",
            "type":"1"
        },
        {
            "id":"2",
            "start_date":"2027-03-09 00:00:00",
            "end_date":"2027-03-11 00:00:00",
            "text":"and me!",
            "type":"2"
        },
        {
            "id":"3",
            "start_date":"2027-03-16 00:00:00",
            "end_date":"2027-03-18 00:00:00",
            "text":"and me too!",
            "type":"3"
        },
        {
            "id":"4",
            "start_date":"2027-03-02 08:00:00",
            "end_date":"2027-03-02 14:10:00",
            "text":"Type 2 event",
            "type":"2"
        }
    ],
    "collections": {
        "sections":[
            {"value":"1","label":"Simple"},
            {"value":"2","label":"Complex"},
            {"value":"3","label":"Unknown"}
        ]
    }
}

В приведённом выше примере массив "data" содержит календарные события, а хэш "collections" содержит коллекции, на которые можно ссылаться через метод serverList().

Связанный API​

Связанные руководства​

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support