dhtmlxScheduler 使用

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

 

 

<script type="text/javascript" charset="utf-8">var prev = null;var curr = null;var next = null;function doOnLoad()          {scheduler.config.multi_day = true;scheduler.config.xml_date="%Y-%m-%d %H:%i";/*scheduler.config.drag_resize=false;         scheduler.config.drag_move=false;         scheduler.config.drag_create=false;        scheduler.config.dblclick_create=false;scheduler.config.readonly=true;        scheduler.config.edit_on_create=false;        scheduler.config.details_on_create=false;*/scheduler.init('scheduler_here',new Date(<%=year(now())%>,<%=month(now())-1%>,<%=day(now())%>),"day");scheduler.load("myevent.asp");var calendar = scheduler.renderCalendar({container:"cal_here", navigation:true,handler:function(date){scheduler.setCurrentView(date, scheduler._mode);}});scheduler.linkCalendar(calendar);scheduler.setCurrentView(scheduler._date, scheduler._mode);scheduler.attachEvent("onEventAdded", function(event_id,event_object){if (!event_object.text) {                  //如果内容是空的那么弹出警示框                  alert("请输入日程内容");                  return false;             }                          //提交程序var sdatestr=new Date(event_object.start_date).format("YYYY-MM-dd hh:mm");var edatestr=new Date(event_object.end_date).format("YYYY-MM-dd hh:mm");var para="stime="+sdatestr+"&etime="+edatestr+"&eid="+event_id+"&title="+event_object.text+"";var url="Schedule_add.asp";var myAjax = new Ajax.Request(url,{method: 'post',parameters: encodeURI(para),onComplete: showResponse});function showResponse(originalRequest){if(originalRequest.responseText=="1"){alert("日程添加成功！")}else{alert("日程添加失败，请检查！");}}}); scheduler.attachEvent("onEventSave",function(id, data){  if (!data.text) {                  //如果内容是空的那么弹出警示框                  alert("请输入日程内容");                  return false;             }              return true; });  //点击明细后、当事件被保存  scheduler.attachEvent("onBeforeEventDelete", function(id, data){  //删除日程程序          //提交程序var para="eid="+id+"";var url="Schedule_del.asp";var myAjax = new Ajax.Request(url,{method: 'post',parameters: encodeURI(para),onComplete: showResponse});function showResponse(originalRequest){if(originalRequest.responseText=="1"){alert("日程删除成功！")}else{alert("日程删除失败，请检查！")}}        return true; });    scheduler.attachEvent("onEventChanged", function(id,data){                                   //提交程序var sdatestr=new Date(data.start_date).format("YYYY-MM-dd hh:mm");var edatestr=new Date(data.end_date).format("YYYY-MM-dd hh:mm");var para="stime="+sdatestr+"&etime="+edatestr+"&eid="+id+"&title="+data.text+"";var url="Schedule_edit.asp";var myAjax = new Ajax.Request(url,{method: 'post',parameters: encodeURI(para),onComplete: showResponse});function showResponse(originalRequest){if(originalRequest.responseText=="1"){//alert("日程修改成功！")}else{alert("日程修改失败，请检查！")}}  return true;          });}/*** 时间对象的格式化;*/Date.prototype.format = function(format){ /*  * eg:format="YYYY-MM-dd hh:mm:ss";  */ var o = {  "Y+" :  this.getFullYear(),  "M+" :  this.getMonth()+1,  //month  "d+" :  this.getDate(),     //day  "h+" :  this.getHours(),    //hour      "m+" :  this.getMinutes(),  //minute      "s+" :  this.getSeconds(), //second      "q+" :  Math.floor((this.getMonth()+3)/3),  //quarter      "S"  :  this.getMilliseconds() //millisecond   }     if(/(Y+)/.test(format)) {    format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   }    for(var k in o) {    if(new RegExp("("+ k +")").test(format)) {      format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));    }   } return format;}</script>

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

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