dhtmlxScheduler 使用

最近OA系统里要加事件日历，功能像google的日历一样，可以在上面直接拖拽保存事件，在网上发现dhtmlxScheduler已经把这些功能都封装好了，只要自己增加把数据写到数据库的功能就可以了，看了一下dhtmlxScheduler提供的api可以在事件的操作上绑定相应的事件通过ajax实现无刷新提交数据。

 

 

[html]  view plain copy

1. <script type="text/javascript" charset="utf-8">  
2.     var prev = null;  
3.     var curr = null;  
4.     var next = null;  
5.   
6.     function doOnLoad()   
7.          {  
8.         scheduler.config.multi_day = true;  
9.         scheduler.config.xml_date="%Y-%m-%d %H:%i";  
10.         /*scheduler.config.drag_resize=false;   
11.                 scheduler.config.drag_move=false;   
12.                 scheduler.config.drag_create=false;   
13.             scheduler.config.dblclick_create=false;  
14.         scheduler.config.readonly=true;  
15.                 scheduler.config.edit_on_create=false;  
16.                 scheduler.config.details_on_create=false;  
17.         */  
18.         scheduler.init('scheduler_here',new Date(<%=year(now())%>,<%=month(now())-1%>,<%=day(now())%>),"day");  
19.         scheduler.load("myevent.asp");  
20.         var calendar = scheduler.renderCalendar({  
21.             container:"cal_here",   
22.             navigation:true,  
23.             handler:function(date){  
24.                 scheduler.setCurrentView(date, scheduler._mode);  
25.             }  
26.         });  
27.         scheduler.linkCalendar(calendar);  
28.         scheduler.setCurrentView(scheduler._date, scheduler._mode);  
29.         scheduler.attachEvent("onEventAdded", function(event_id,event_object){  
30.                         if (!event_object.text) {    
31.                                         //如果内容是空的那么弹出警示框    
32.                                         alert("请输入日程内容");    
33.                                         return false;    
34.                             }     
35.                                     //提交程序  
36.                         var sdatestr=new Date(event_object.start_date).format("YYYY-MM-dd hh:mm");  
37.                         var edatestr=new Date(event_object.end_date).format("YYYY-MM-dd hh:mm");  
38.                         var para="stime="+sdatestr+"&etime="+edatestr+"&eid="+event_id+"&title="+event_object.text+"";  
39.                         var url="Schedule_add.asp";  
40.                         var myAjax = new Ajax.Request(  
41.                         url,  
42.                         {  
43.                         method: 'post',  
44.                         parameters: encodeURI(para),  
45.                         onComplete: showResponse  
46.                         });  
47.                           
48.                           
49.                         function showResponse(originalRequest)  
50.                         {  
51.                         if(originalRequest.responseText=="1")  
52.                         {alert("日程添加成功！")}  
53.                         else  
54.                         {alert("日程添加失败，请检查！");  
55.                         }  
56.                         }  
57.                         });   
58.         scheduler.attachEvent("onEventSave",function(id, data){    
59.                 if (!data.text) {    
60.                                 //如果内容是空的那么弹出警示框    
61.                                 alert("请输入日程内容");    
62.                                 return false;    
63.                         }     
64.                     return true; });   
65.                  //点击明细后、当事件被保存    
66.         scheduler.attachEvent("onBeforeEventDelete", function(id, data){    
67.             //删除日程程序   
68.                  //提交程序  
69.                           
70.                         var para="eid="+id+"";  
71.                         var url="Schedule_del.asp";  
72.                         var myAjax = new Ajax.Request(  
73.                         url,  
74.                         {  
75.                         method: 'post',  
76.                         parameters: encodeURI(para),  
77.                         onComplete: showResponse  
78.                         });  
79.                           
80.                           
81.                         function showResponse(originalRequest)  
82.                         {  
83.                         if(originalRequest.responseText=="1")  
84.                         {alert("日程删除成功！")}  
85.                         else  
86.                         {alert("日程删除失败，请检查！")}  
87.                         }         
88.              return true; });    
89.           scheduler.attachEvent("onEventChanged", function(id,data){  
90.                      
91.                         //提交程序  
92.                         var sdatestr=new Date(data.start_date).format("YYYY-MM-dd hh:mm");  
93.                         var edatestr=new Date(data.end_date).format("YYYY-MM-dd hh:mm");  
94.                         var para="stime="+sdatestr+"&etime="+edatestr+"&eid="+id+"&title="+data.text+"";  
95.                         var url="Schedule_edit.asp";  
96.                         var myAjax = new Ajax.Request(  
97.                         url,  
98.                         {  
99.                         method: 'post',  
100.                         parameters: encodeURI(para),  
101.                         onComplete: showResponse  
102.                         });  
103.                           
104.                           
105.                         function showResponse(originalRequest)  
106.                         {  
107.                         if(originalRequest.responseText=="1")  
108.                         {  
109.                             //alert("日程修改成功！")  
110.                         }  
111.                         else  
112.                         {  
113.                             alert("日程修改失败，请检查！")  
114.                             }  
115.                         }   
116.              return true;  
117.           });  
118.     }  
119.     /**  
120. * 时间对象的格式化;  
121. */  
122. Date.prototype.format = function(format){  
123.  /*  
124.   * eg:format="YYYY-MM-dd hh:mm:ss";  
125.   */  
126.  var o = {  
127.   "Y+" :  this.getFullYear(),  
128.   "M+" :  this.getMonth()+1,  //month  
129.   "d+" :  this.getDate(),     //day  
130.   "h+" :  this.getHours(),    //hour  
131.       "m+" :  this.getMinutes(),  //minute  
132.       "s+" :  this.getSeconds(), //second  
133.       "q+" :  Math.floor((this.getMonth()+3)/3),  //quarter  
134.       "S"  :  this.getMilliseconds() //millisecond  
135.    }  
136.     
137.    if(/(Y+)/.test(format)) {  
138.     format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
139.    }  
140.    
141.    for(var k in o) {  
142.     if(new RegExp("("+ k +")").test(format)) {  
143.       format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));  
144.     }  
145.    }  
146.  return format;  
147. }  
148. </script>  

ajax部分使用了js的prototype框架，dhtmlx本身也提供ajax由于测试了下没有成功，所以最终还是选择了熟悉的prototype框架

dhtmlxScheduler documentation:http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:toc