dhtmlxscheduler使用

本文中主要包含下面几个部分:

1.页面中如何初始化dhtmlxscheduler?

2.dhtmlxscheduler本地化?

3.如何实现数据库的持久化?


1.页面中如何初始化dhtmlxscheduler?

1.1在页面的开始部分引入相关联的文件.

<script type="text/javascript" src="<%=basePath%>dhtmlxscheduler/dhtmlxscheduler.js"></script>

<link rel="stylesheet" href="<%=basePath%>dhtmlxscheduler/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">

1.2 在body中添加dhtmlscheduler的渲染位置

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</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>

1.3 添加初始化函数

<script>
    function init() {
        scheduler.init('scheduler_here',null,"week");
               scheduler.load("events.xml");   
    }
</script>

1.4在body的onload事件中调用上面的init函数

<body onload="init();">


2.dhtmlxscheduler本地化

dhtmlxscheduler本地化只需要引入两个js即可文件,可以修改这两个js文件,从而实现自定义的本地化。这里需要注意的是需要使用utf-8的字符集,否则容易产生乱码。

<!-- 本地化js,这里需要注意的是这里需要实现字符集是utf-8 -->
    <script src="<%=basePath%>dhtmlxscheduler/sources/locale_cn.js" type="text/javascript" charset="utf-8"></script>
    <script src="<%=basePath%>dhtmlxscheduler/sources/locale_recurring_cn.js" type="text/javascript" charset="utf-8"></script>


3.如何实现数据库的持久化?

3.1如何将数据从数据库中读取出来加载到dhtmlxscheduler?

3.2如何和数据库实现交互?增加,删除,修改?

3.1如何将数据从数据库中读取出来加载到dhtmlxscheduler中?

客户端:

scheduler.load("url");

服务器端:

首先从数据库中读取各个event,然后将各个event格式化成下面的格式,然后输出:

<data>
    <event id="2">
        <start_date>2009-05-24 00:00:00</start_date>
        <end_date>2009-06-08 00:00:00</end_date>
        <text><![CDATA[French Open]]></text>
        <details><![CDATA[Philippe-Chatrier Court Paris, FRA]]></details>
    </event>
    <event id="3">
        <start_date>2009-06-10 00:00:00</start_date>
        <end_date>2009-06-13 00:00:00</end_date>
        <text><![CDATA[Aegon Championship]]></text>
        <details><![CDATA[The Queens Club London, ENG]]></details>
    </event>
</data>

3.2如何和数据库实现交互?增加,删除,修改?

增加,删除 ,修改的实现需要通过dhtmlxscheduler事件来实现,实现模板如下(注意需要引入prototype.js文件):

scheduler.attachEvent("onBeforeEventDelete", function(event_id, event_object){
    var url = "YOUR-URL";
    var id = event_object.id;
    var text = event_object.text;
    // date 需要实现格式化,这里需要和server端相互交互
    var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
    var start_date =
        convert(event_object.start_date);
    var end_date = convert(event_object.end_date);
    var details = event_object.details;
    var pars = "id=" + id +
        "&start_date=" + start_date +
        "&end_date=" + end_date +
        "&text=" + text +
        "&details=" + details;
               
    // 向数据库提交
    new Ajax.Request(url,{
            method:'post',
            parameters: pars,
            onSuccess: function(transport) {
                    // 关闭窗口
                    programing = false;
              }
    });
               
    // 这里使用true刷心主窗口,将event不显示
    return true;
});
   
scheduler.attachEvent("onEventChanged", function(event_id, event_object){
    // 得到数据
    var url = "YOUR-URL";
    var id = event_object.id;
    var text = event_object.text;
    // date 需要实现格式化
    var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
    var start_date =
        convert(event_object.start_date);
    var end_date = convert(event_object.end_date);
        var details = event_object.details;
    var pars = "id=" + id +
        "&start_date=" + start_date +
        "&end_date=" + end_date +
        "&text=" + text +
        "&details=" + details;
               
    // 向数据库提交
    new Ajax.Request(url,{
        method:'post',
        parameters: pars,
        onSuccess: function(transport) {
            // 关闭窗口
            programing = false;
        }       
    });
});

// 添加事件event
scheduler.attachEvent("onEventAdded", function(event_id,event_object){
    // 这里需要引入另外的js库,将数据提交到后台保存,比如使用prototype
    // 有用连接:
    //             http://blog.csdn.net/bvb09/archive/2009/12/18/5031733.aspx(完整实例)
    //             http://gh0769.javaeye.com/blog/662511
    //             http://www.cnblogs.com/smildlzj/archive/2010/01/07/1641755.html
    //             http://ynial.javaeye.com/blog/741092
    // 向数据库提交
    var url = "YOUR-URL";
    var id = event_object.id;
    var text = event_object.text;
    // date 需要实现格式化
    var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
    var start_date =
        convert(event_object.start_date);
    var end_date = convert(event_object.end_date);
    var details = event_object.details;
               
    var pars = "id=" + id +
        "&start_date=" + start_date +
        "&end_date=" + end_date +
        "&text=" + text +
        "&details=" + details;
           
    new Ajax.Request(url,{
        method:'post',
        parameters: pars,
        onSuccess: function(transport) {
            // 关闭窗口
            programing = false;
        }
    });
});


你可能感兴趣的:(scheduler)