关于dhtmlxScheduler的使用说明(ADD EDIT DEL,自定义CelendarBox)

由于比较多朋友询问我的使用问题，所以写一篇简单的使用说明：

可以看回以前相关的文章：

基于dhtmlxScheduler的个人计划...

探讨:OA系统的设计问题.

weebox[ PopUp - 弹出窗 对话框 ]

weebox是一个基于jquery的弹窗插件

dhtmlxScheduler[ Calendars - 日历组件 ]

dhtmlxScheduler是一个JavaScript日程安排控件，类似于Google日历。日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间。事件可以按天，周，月三个种视图显示。 ================ 以下进入正题：

function CalendarInit(sid,operator) {

Owner=(sid==operator);
scheduler.config.first_hour=8;
scheduler.config.api_date="%Y-%m-%d %H:%i";
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.hour_date="%H:%i";
scheduler.config.default_date="%Y年%m月%d日";
scheduler.config.month_date="%Y年 %m月";
scheduler.config.day_date="%m月%d日";
scheduler.config.start_on_monday=true;
//scheduler.config.update_render=true;
if(!Owner)
{
scheduler.config.drag_resize=false;
scheduler.config.drag_move=false;
scheduler.config.drag_create=false;
scheduler.config.dblclick_create=false;
scheduler.config.edit_on_create=false;
scheduler.config.details_on_create=false;

if(!Permission.Edit)
{
scheduler.config.readonly=true;
scheduler.attachEvent("onClick",function(id){
CelendarBox(id);
});
}
}

scheduler.showLightbox = CelendarBox;
scheduler.attachEvent("onBeforeEventDelete",Del);
scheduler.attachEvent("onEventChanged", function(event_id,event_object){
//alert("onEventChanged: "+event_id);
Edit(event_id,event_object);
});
scheduler.attachEvent("onEventAdded", function(event_id,event_object){
//alert("onEventAdded: "+event_id);
Add(event_id,event_object,function(old_id,new_id){
scheduler.changeEventId(old_id, new_id);
});
});
scheduler.locale={
date:{
month_full:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
month_short:["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
day_full:["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
day_short:["日", "一", "二", "三", "四", "五", "六"]
},
labels:{
dhx_cal_today_button:"今天",
day_tab:"日",
week_tab:"周",
month_tab:"月",
new_event:"新工作计划",
icon_save:"保存",
icon_cancel:"取消",
icon_details:"详细",
icon_edit:"编辑",
icon_delete:"删除",
confirm_closing:"", //Your changes will be lost, are your sure?
confirm_deleting:"请确认你是否需要删除该工作计划?",
section_content:"内容",
section_views:"上级意见",
section_time:"时间"
}
};
scheduler.init('scheduler_here',null,"week");
scheduler.load("./ListData.action?sid="+sid+"&r="+Math.random());

}

代码说明一下：

CalendarInit：这个是初始化日历的函数，是我从实际项目复制过来，无删减。

sid：所有者ID

operator：操作者ID

Owner=(sid==operator);//判断是否为所有者

Permission.Edit：（true、false），是否有修改权限

//以下代码为绑定事件：当点击条目，弹出窗口

scheduler.attachEvent("onClick",function(id){
CelendarBox(id);
});

//设置日程窗口函数为我自定义的函数

scheduler.showLightbox = CelendarBox;

//以下代码为绑定事件：删除动作

//Del为删除对象函数
scheduler.attachEvent("onBeforeEventDelete",Del);

//以下代码为绑定事件：条目变化（拖拉事件、调整时间）
scheduler.attachEvent("onEventChanged", function(event_id,event_object){
//alert("onEventChanged: "+event_id);
Edit(event_id,event_object);//Edit实际修改对象函数
});

//以下代码为绑定事件：增加
scheduler.attachEvent("onEventAdded", function(event_id,event_object){
//alert("onEventAdded: "+event_id);
Add(event_id,event_object,function(old_id,new_id){
scheduler.changeEventId(old_id, new_id);
});//Add实际增加对象函数
});

scheduler.init('scheduler_here',null,"week");//初始化（见下）
scheduler.load("./ListData.action?sid="+sid+"&r="+Math.random());//载入数据，为XML格式，见dhtmlxScheduler例子的XML文件格式

<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>

var _CelendarBox;//该处为，弹出窗口的HTML源码，我该处是通过AJAX预先载入HTML文件。
function CelendarBox(id)
{
if (!id) {
return
}
if (!scheduler.callEvent("onBeforeLightbox", [id])) {
return;
}
var o=scheduler.getEvent(id);
var h=240
o.superior=o.superior?Trim(o.superior):"";
o.views=o.views?Trim(o.views):"";
o.content=o.content?Trim(o.content):"";
var tmp=Box_Html.replace(/{title}/g,o.text);//替换窗口HTML代码的{title}
tmp=tmp.replace(/{content}/g,o.content);//替换窗口HTML代码的{content}
tmp=tmp.replace(/{superior}/g,o.superior);
tmp=tmp.replace(/{views}/g,o.views);

if(isEmpty(o.startTime))
{
o.startTime=DateFormat(o.start_date);//日期格式转换为这样的格式2009-12-33
o.endTime=DateFormat(o.end_date);//日期格式转换为这样的格式2009-12-33
}
tmp=tmp.replace(/{startTime}/g,o.startTime);
tmp=tmp.replace(/{endTime}/g,o.endTime);

//弹出weeboxs的窗口
_CelendarBox=$.weeboxs.open(tmp, {
boxid:'box',
title:'工作计划: ',
width:500, height:h,
showOk:ShowOk,
oncancel:function(box){
scheduler._edit_stop_event(o, false);//当点击取消按钮时候，将dhtmlxScheduler的状态edit mode关闭，提交，触发相应动作（或者大家看看源码，好理解点）
_CelendarBox.close();//关闭窗口
_CelendarBox=null;
},
onok:function(box){
var f=$("#boxForm");
o.text=$("#title",f).attr("value");
o.content=$("#content",f).attr("value");
o.startTime=$("#startTime",f).attr("value");
o.endTime=$("#endTime",f).attr("value");
if(Permission.Edit)
{
o.superior=$("#superior",f).attr("value");
o.views=$("#views",f).attr("value");
}
o._timed = scheduler.is_one_day_event(o);//这里忘了什么意思，看看源码吧。
o.start_date=scheduler.templates.api_date(o.startTime);//将2009-12-22的日期格式转换为dhtmlxScheduler内置的日期格式，忘记了是什么
o.end_date=scheduler.templates.api_date(o.endTime);//将2009-12-22的日期格式转换为dhtmlxScheduler内置的日期格式，忘记了是什么
scheduler._edit_stop_event(o, true);//将dhtmlxScheduler的状态edit mode关闭，提交，触发相应动作（或者大家看看源码，好理解点）
}
});
}
//关闭窗口函数
function CelendarBoxCloseing(id,data)
{
scheduler.setEvent(id,data);
scheduler.event_updated(data);//更新显示的对象

if(_CelendarBox)
{
_CelendarBox.close();
_CelendarBox=null;
}
scheduler.callEvent("onAfterLightbox", [])//调用为onAfterLightbox的动作
}

function DateFormat(d)
{
return new Date(d).pattern("yyyy-MM-dd HH:mm");
}
//修改函数，其他函数大同小异
function Edit(id,data)
{
json2from(data);
var f=$("#calendarForm");
if(isEmpty($("#title",f).attr("value")))
{
WarnBox("对不起,请输入标题!","错误");
return false;
}
if(isEmpty($("#startTime",f).attr("value")))
{
WarnBox("对不起,请选择开始时间!","错误");
return false;
}
if(isEmpty($("#endTime",f).attr("value")))
{
WarnBox("对不起,请选择结束时间!","错误");
return false;
}
//GlobaAjax是我自己封装的AJAX提交的函数，其实大同小异。
new GlobaAjax().Submit({
url:"Edit.action?calendar.id="+id,
form:f,
LoadingLayer:'#DataLoading',
successFunction: function(json) {

CelendarBoxCloseing(id,data);//成功以后，还要更新页面上的信息喔。
}
});
}
function json2from(json)
{
var f=$("#calendarForm");
$("#title",f).attr("value",json.text);
$("#content",f).attr("value",json.content);
$("#views",f).attr("value",json.views);
$("#superior",f).attr("value",json.superior);
if(isEmpty(json.startTime))
{
json.startTime=DateFormat(json.start_date);
json.endTime=DateFormat(json.end_date);
}
$("#startTime",f).attr("value",json.startTime);
$("#endTime",f).attr("value",json.endTime);
//alert(f.html());
}

原文: http://www.cnblogs.com/smildlzj/