dhtmlxscheduler使用

最新推荐文章于 2024-04-11 09:31:59 发布

iteye_11486

最新推荐文章于 2024-04-11 09:31:59 发布

阅读量177

点赞数

文章标签：数据库 javascript ViewUI

本文介绍如何在页面中初始化 dhtmlxscheduler，并实现本地化及与数据库的交互，包括加载事件、增加、删除和修改等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

2.dhtmlxscheduler本地化？

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

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

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

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

1.3 添加初始化函数

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

2.dhtmlxscheduler本地化

dhtmlxscheduler本地化只需要引入两个js即可文件，可以修改这两个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格式化成下面的格式，然后输出：

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.youkuaiyun.com/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;
}
});
});