关于dhtmlxScheduler的使用说明(ADD EDIT DEL,自定义CelendarBox)
生活随笔
收集整理的這篇文章主要介紹了
关于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"> </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());
}
?
?
轉載請注明：http://www.cnblogs.com/smildlzj/
轉載于:https://www.cnblogs.com/smildlzj/archive/2010/01/07/1641755.html
總結
以上是生活随笔為你收集整理的关于dhtmlxScheduler的使用说明(ADD EDIT DEL,自定义CelendarBox)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大数据与云计算应用
- 下一篇： android调节音量——AudioMa