关于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">&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>

 

 

 

 

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/