加载数据

dhtmlxScheduler 支持三种数据格式的加载:

  1. JSON;
  2. XML;
  3. ICal。

数据格式示例

从内联数据集加载数据

要直接从内联数据集加载数据,可以使用 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 与服务器通信。

  • 服务端的实现取决于所选用的框架。 例如,对于 Node.js,需要为 Scheduler 发送 AJAX 请求的 URL 添加一个服务器路由。

该路由会生成一个 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);
    });
});
  • 在客户端,使用 load 方法并指定 Scheduler 请求数据的 URL:

Loading from a database. Client-side code

scheduler.init('scheduler_here', new Date(), "month");
scheduler.load("apiUrl");

关于与 REST API 服务端集成的更多详细信息,请参见文章 服务器端集成

2) 第二种方式是使用 PHP Connector 从数据库表加载数据。

  • 在服务端,实现一个返回 XML 或 JSON 格式数据的脚本:

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");
  • 在客户端,使用 load 方法并指定服务端脚本的路径:

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"]);

数据属性

必需属性

数据项至少需要以下三个属性才能被正确解析:

  • start_date - (string) 事件的开始时间;
  • end_date - (string) 事件的结束时间;
  • text - (string) 事件描述。

从数据库加载时,还需要一个额外的必需属性:

  • id - (string, number) 事件标识符。

默认情况下,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");

自定义属性

除了必需字段外,数据项还可以包含自定义属性。这些额外属性会被作为字符串解析,并可在客户端按需使用。

带有自定义属性的数据示例可在 这里 查看。

数据库结构

为调度事件建立数据库时,建议的结构如下:

  • events 表 - 存储调度事件
    • id - (string/int/guid) - 事件标识符。主键,自增。
    • start_date - (DateTime) - 事件开始时间,不能为空。
    • end_date - (DateTime) - 事件结束时间,不能为空。
    • text - (string) - 事件描述。

对于循环事件,还需要附加列:

  • events 表 - 存储调度事件
    • id - (string/int/guid) - 事件标识符。主键,自增。
    • start_date - (DateTime) - 事件开始时间,不能为空。
    • end_date - (DateTime) - 事件结束时间,不能为空。
    • text - (string) - 事件描述。
    • event_pid - (string/int/guid) - 父事件系列 id 的引用。可为空或默认为空(空字符串、零)。
    • event_length - (string/bigint) - 事件持续时间或已修改发生的时间戳。可为空或默认为空(空字符串、零)。最大长度(字符串)为 10。
    • rec_type - (string) - 循环规则。可为空或默认为空字符串。最大长度为 50。

可根据需要添加更多列,这些列将在客户端 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 的周视图:

  • "day" 模式
scheduler.setLoadMode("day");

调度器按天请求数据,如从 2018-01-29 到 2018-02-05。

  • "month" 模式
scheduler.setLoadMode("month");

调度器按整月请求数据,如从 2018-01-01 到 2018-03-01。

  • "year" 模式
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 区段数据

将数据加载到 TimelineUnits 视图时,需要提供区段数组。

如需从后端加载 Timeline 和 Units 区段,需要更详细的设置:

  • 在初始化 Timeline 视图时,不直接传递 sections 数组,而是使用 serverList 方法和集合名称:
scheduler.createTimelineView({
   ....
   y_unit: scheduler.serverList("sections"),
   ...
});
  • 使用 load 方法将数据加载到调度器:
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 方法引用的集合。

返回顶部