dhtmlxScheduler 中文文档（一）——How to Start

最新推荐文章于 2025-05-13 10:35:33 发布

翻译最新推荐文章于 2025-05-13 10:35:33 发布 · 9.7k 阅读

在这篇教程中我们来考虑创建一个标准的日程表，这个日程表需要从数据库中加载数据，并且可以经过操作后保存到数据库中。文章的后面部门的代码可以作为一个应用日程表的开始。

第一步：新建一个HTML文件，引入需要的文件

让我们开始我们的应用，创建一个HTML文件，引入必要的文件，需要的文件是这两个：

●dhtmlxscheduler.js

●dhtmlxscheduler.css

<!DOCTYPE html>
<html>
<head>
   <title>How to start</title>
   <script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
   <link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" type="text/css">
</head>
<body>
    //your code will be here
</body>
</html>

快速浏览下dhtmlxScheduler 文件包，找到这两个文件。

●sources - 是一个资源文件库，这些文件没有被压缩非常易于阅读。这个文件包预计大部分用于组件修改。

●samples - 代码示例

●docs - 组件的所有说明文档

●codebase - 代码库，这些文件都被压缩了，在你开发的项目中，你需要用到这些文件。

第二步：建立相关的DIV元素

在初始化日程表之前，你需要定义相关的div元素，来存放日程表，标准的div可以像下面这样创建：

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button"> </div>
        <div class="dhx_cal_next_button"> </div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>       
</div>

第三步：样式

为了兼容不同的浏览器，并适应全屏模式，为日程表定义了以下样式

<style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }   
</style>

如果你不用全屏模式，你就不需要上面的代码，在div中加入如下代码即可：

<div id="scheduler_here" class="dhx_cal_container" 
style='width:200px; height:300px; padding:10px;'>
...

第四步：初始化
第一步：新建一个HTML文件，引入需要的文件

完成上述准备后，你可以对日程表初始化了。要注意，日程表是一个静态对象，在一个页面只能被实例化一次。参考日程表的实例化，用dhtmlxScheduler 或者简化版的scheduler

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

第五步：加载数据

如果你现在运行页面，就可以看到一个日程表了，但是它没有包含任何数据。

为了填充日程表，我们需要从数据源获取数据。我们会用最简单的方式，选取数据。加载数据的过程中，需要用如下的parse方法。

一个数据对象的属性如下：

●id - (string,number) id编号

●start_date - (string) 数据的开始时间，它的默认格式是："%m/%d/%Y %H:%i"

●end_date - (string) 事件开始的时间，它的默认格式是："%m/%d/%Y %H:%i"

●text - (string) 事件描述

<pre name="code" class="javascript">var events = [
{id:1, text:"Meeting",   start_date:"04/11/2013 14:00",end_date:"04/11/2013 17:00"},
{id:2, text:"Conference",start_date:"04/15/2013 12:00",end_date:"04/18/2013 19:00"},
{id:3, text:"Interview", start_date:"04/24/2013 09:00",end_date:"04/24/2013 10:00"}
];
 
scheduler.parse(events, "json");//takes the name and format of the data source

第六步：数据结构

现在，如果你打算从服务器加载数据，你需要创建一个类似于下面的数据表

你可以用下面的代码

CREATE TABLE `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `start_date` datetime NOT NULL,
  `end_date` datetime NOT NULL,
  `text` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
)

除了上面提到的字段之外，你可以创建其他的字段，这些字段可以被传到前台。而且，如果'%Y-%m-%d %H:%i'这种类型的日期格式和你期望在日程表中显示的不一样的话，为了保证数据的正确性，你需要转换日期格式。注意：需要在初始化之前配置这些选项。

scheduler.config.xml_date="%Y-%m-%d %H:%i";
...
scheduler.init('scheduler_here',new Date(),"month");

第七步：从数据库加载数据

为了从数据库加载数据，指定一个文件来加载数据，从而达成和服务端的交流。可能你需要手动写所有的服务端的数据。为了满足需求，可能需要用下面的方法：

scheduler.load("data/connector.php");

第八步：服务器端代码编写

<?php 
require_once("../codebase/connector/scheduler_connector.php");
 
$res=mysql_connect("localhost","root","");
mysql_select_db("schedulerDB");
 
$conn = new SchedulerConnector($res);
 
$conn->render_table("events","id","start_date,end_date,text");

第九步：保存数据

如果你现在运行页面，会看到日程表从数据库中加载出来了数据，但是不能向数据库保存数据库。为了迫使日程表向数据库中保存数据，需要用到dataProcessor。使用dataProcessor非常容易，所有你要做的就是初始化日程表。

var dp = new dataProcessor("data/connector.php");
dp.init(scheduler);

到此所有的设置就结束了。一个可以从数据库读取数据的日程表已经做完了。现在你可以设置，改变这个日程表，从而满足你的需求。