在这篇教程中我们来考虑创建一个标准的日程表,这个日程表需要从数据库中加载数据,并且可以经过操作后保存到数据库中。文章的后面部门的代码可以作为一个应用日程表的开始。
第一步:新建一个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);
到此所有的设置就结束了。一个可以从数据库读取数据的日程表已经做完了。现在你可以设置,改变这个日程表,从而满足你的需求。