由于比较多朋友询问我的使用问题,所以写一篇简单的使用说明:
可以看回以前相关的文章:
================
以下进入正题:
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());
}
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.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 >
< 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());
}
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());
}