在这篇教程中我们来考虑创建一个标准的日程表,这个日程表需要从数据库中加载数据,并且可以经过操作后保存到数据库中。文章的后面部门的代码可以作为一个应用日程表的开始。
第一步:新建一个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 id="scheduler_here" class="dhx_cal_container" style='width:200px; height:300px; padding:10px;'> ...
完成上述准备后,你可以对日程表初始化了。要注意,日程表是一个静态对象,在一个页面只能被实例化一次。参考日程表的实例化,用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`) )
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);
到此所有的设置就结束了。一个可以从数据库读取数据的日程表已经做完了。现在你可以设置,改变这个日程表,从而满足你的需求。