dhtmlxScheduler 中文文档(一)——How to Start

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

dhtmlxScheduler 中文文档(一)——How to Start_第1张图片


第一步:新建一个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);


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



你可能感兴趣的:(dhtmlxScheduler 中文文档(一)——How to Start)