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

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的动作
}

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

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

ASTreeView Demo:Add, Edit Delete nodes
http://www.jinweijie.com/ http://www.astreeview.com/astreeviewdemo/astreeviewdemo1.aspx 選擇節點: <sc ...
Linux上添加路由，删除路由，修改路由配置（route add, route del, 路由表项基本知识）
路由基础知识: 是由一项或者多项路由表组成的,每个IP报文被发送前,系统都会查找主机路由表,决定将这个报文从哪个网卡,发送到哪个下一跳.路由表项可以分成主机路由,网络路由和默认路由3种.每条路由表项 ...
ubuntu删除route_linux下route add route del 用法
显示现在所有路由 #route root@ubuntu:~# route Kernel IP routing table Destination Gateway Genmask ...
ASP.NET MVC开发，编辑页面和添加页面基本相同，我们控制器 Add Edit是共用同一个View吗？...
http://q.cnblogs.com/q/51693/ 这种的话,一般公用就好了.,如下的写法: [HttpGet]public ActionResult UserManage(int userI ...
html在表格添加下拉按钮,Bootstrap-table 使用说明--如何在表格td里增加一个按钮
如何在表格td里增加一个按钮:如何在列表操作列区域添加按钮初始化表格 table.bootstrapTable -->columns 增加: { field: 'operate', title ...
「FastAdmin」fastadmin二次开发中如何自定义查询数据
fastadmin二次开发中如何自定义查询数据问题背景:最近做一个网站的过程中遇到了一个需求:对于不同用户组的用户,显示的数据要根据权限来筛选.问题看起来不是很难,文档和社区中已经给了足够的提示,我 ...
B-JUI文档、下载
概述特别说明本文档仅适用于最新版的B-JUI,网站首页或下载页可以查看B-JUI的最后更新时间. B-JUI前端管理框架适用于快速开发各类WEB管理系统,可与任意后端程序(java.php..ne ...
jqGrid资料总结
我的异常网 http://www.myexception.cn/ajax/414051.html jqGrid:二. 第一个jqGrid <!DOCTYPE html PUBLIC " ...
fastadmin实现导出Excel和导入Excel数据
第一:导出数据为Excel 注意:直接url访问,不能使用ajax,因为ajax要求返回数据,和PHPExcel一会浏览器输出冲突!将数据作为参数 1.导出所有用户数据代码:在index.html文 ...

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

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

最新文章

热门文章