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

2010-01-07 22:08 smildlzj 阅读(3981) 评论(4) 编辑收藏举报

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

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

基于dhtmlxScheduler的个人计划...

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

weebox[ PopUp - 弹出窗对话框 ]

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

dhtmlxScheduler[ Calendars - 日历组件 ]

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

================

以下进入正题：

代码说明一下：

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文件格式

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/

刷新页面返回顶部

smildlzj

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

About