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 方法引用的集合。
返回顶部