关于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/

转载于:https://www.cnblogs.com/smildlzj/archive/2010/01/07/1641755.html