dhtmlxScheduler поддерживает загрузку данных в трех форматах:
Для загрузки данных непосредственно из встроенного набора используется метод parse:
scheduler.init('scheduler_here',new Date(2009,10,1),"month");
...
scheduler.parse([
{text:"Meeting", start_date:"2019-04-11 14:00", end_date:"2019-04-11 17:00"},
{text:"Conference", start_date:"2019-04-15 12:00", end_date:"2019-04-18 19:00"},
{text:"Interview", start_date:"2019-04-24 09:00", end_date:"2019-04-24 10:00"}
],"json");
Related sample: Displaying events as a cascade
Для загрузки данных из внешнего файла используется метод load:
scheduler.init('scheduler_here',new Date(2018,10,1),"month");
...
scheduler.load("data.json"); //загрузка данных из файла
Related sample: Basic initialization
Существует два подхода к загрузке данных из базы данных. Оба требуют обработки на клиентской и серверной сторонах.
1) Первый подход использует REST API для взаимодействия с сервером.
Этот маршрут формирует ответ в формате JSON.
app.get('/data', function(req, res){
db.event.find().toArray(function(err, data){
//установка свойства id для всех записей
for (var i = 0; i < data.length; i++)
data[i].id = data[i]._id;
//вывод ответа
res.send(data);
});
});
Loading from a database. Client-side code
scheduler.init('scheduler_here', new Date(), "month");
scheduler.load("apiUrl");
Более подробная информация о серверной интеграции с REST API доступна в статье Интеграция с серверной стороной.
2) Второй подход предполагает загрузку данных из таблиц базы данных с помощью PHP Connector.
Static loading from db. Server-side code
include ('dhtmlxConnector/codebase/scheduler_connector.php');
$res=mysql_connect("localhost","root","");
mysql_select_db("sampleDB");
$calendar = new SchedulerConnector($res);
$calendar->render_table("events","id","event_start,event_end,text","type");
Static loading from db. Client-side code
scheduler.init('scheduler_here', new Date(), "month");
scheduler.load("events.php");
Дополнительные подробности приведены в руководстве dhtmlxScheduler с dhtmlxConnector.
Для загрузки данных из нескольких источников доступно расширение multisource:
scheduler.plugins({
multisource: true
});
Несколько источников могут использоваться как для статической, так и для динамической загрузки.
После подключения соответствующего файла, метод load может принимать массив источников:
scheduler.load(["first/source/some","second/source/other"]);
Для корректного разбора данных каждой записи необходимы как минимум три свойства:
При загрузке из базы данных требуется дополнительное обязательное свойство:
По умолчанию, для данных в формате JSON и XML используется формат даты '%Y-%m-%d %H:%i' (см. спецификацию формата даты).
Для изменения формата используйте опцию date_format.
scheduler.config.date_format="%Y-%m-%d %H:%i";
...
scheduler.init('scheduler_here', new Date(2019, 3, 18), "week");
Помимо обязательных полей, к данным можно добавлять пользовательские свойства. Дополнительные свойства разбираются как строки и могут использоваться на клиентской стороне по необходимости.
Примеры данных с пользовательскими свойствами доступны здесь.
При создании базы данных для событий планировщика ожидается следующая структура:
Для повторяющихся событий требуются дополнительные столбцы:
Дополнительные столбцы могут быть добавлены по необходимости; они будут доступны через клиентский API.
По умолчанию dhtmlxScheduler загружает все данные сразу, что может быть неэффективно при больших объемах данных. Динамическая загрузка позволяет получать данные частями, ограниченными текущей видимой областью.
Включите динамическую загрузку с помощью метода setLoadMode:
Enabling the dynamic loading
scheduler.setLoadMode("month");
scheduler.load("some.php");
Метод принимает режим загрузки, определяющий объем данных для загрузки: day, week, month или year.
Например, при установке режима 'week' планировщик будет запрашивать данные только для текущей недели, подгружая дополнительные данные по мере необходимости.
Режимы загрузки определяют интервал данных, который загружается для выбранного периода. Например, при открытии представления Неделя для дат с 2018-01-29 по 2018-02-05:
scheduler.setLoadMode("day");
Планировщик запрашивает данные по дням, например, с 2018-01-29 по 2018-02-05.
scheduler.setLoadMode("month");
Планировщик запрашивает данные по полным месяцам, например, с 2018-01-01 по 2018-03-01.
scheduler.setLoadMode("year");
Планировщик запрашивает данные по полным годам, например, с 2018-01-01 по 2019-01-01.
Запрашиваемый интервал всегда не меньше отображаемого.
Интервал загрузки влияет на:
Большие интервалы уменьшают частоту запросов, так как уже полученные данные кэшируются.
Большие интервалы означают больше данных за один запрос, что увеличивает время обработки.
Запросы имеют следующий формат:
some.php?from=DATEHERE&to=DATEHERE
где DATEHERE — это валидная дата в формате, определяемом опцией load_date.
При использовании dhtmlxConnector на сервере не требуется дополнительная обработка для разбора таких запросов.
При работе с большими объемами данных полезно отображать индикатор загрузки.
Включите индикатор загрузки, установив свойство show_loading в true:
scheduler.config.show_loading = true;
...
scheduler.init('scheduler_here',new Date(2018,0,10),"month");
Чтобы изменить изображение индикатора, замените 'imgs/loading.gif' на свою картинку.
При загрузке данных в представления Timeline и Units необходимо предоставить массив секций.
Для загрузки секций Timeline и Units с бэкенда требуется более подробная настройка:
scheduler.createTimelineView({
....
y_unit: scheduler.serverList("sections"),
...
});
scheduler.load("data.json");
"data.json"
{
"data":[
{
"id":"1",
"start_date":"2018-03-02 00:00:00",
"end_date":"2018-03-04 00:00:00",
"text":"dblclick me!",
"type":"1"
},
{
"id":"2",
"start_date":"2018-03-09 00:00:00",
"end_date":"2018-03-11 00:00:00",
"text":"and me!",
"type":"2"
},
{
"id":"3",
"start_date":"2018-03-16 00:00:00",
"end_date":"2018-03-18 00:00:00",
"text":"and me too!",
"type":"3"
},
{
"id":"4",
"start_date":"2018-03-02 08:00:00",
"end_date":"2018-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.
Наверх