dhtmlxScheduler 使用

原创 2011年10月18日 13:33:37
最近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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vince6799/article/details/6884164

微信公众号使用

微信公众号使用,是一套基础课程,为后面的《PHP微信公众号开发》做铺垫。微信几乎是智能手机上必装的软件,很多的商家在微信上开通公众号,想要把公众号的价值发挥最大,必须学会公众号的使用,开发和营销。这一套课程重点教你学会公众号的使用,为后面的做好基础。欢迎反馈,QQ/微信:68183131
  • 2016年06月24日 14:48

dhtmlxscheduler使用

最近项目中需要一个日程管理的功能,找啊找,先是用的fullcalendar,不知道是人品还是版本问题,events接受后台JSON参数总是出错,试了许多方法,也没有试出什么结果来。所以果断换到了dht...
  • dearsny
  • dearsny
  • 2015-05-05 11:46:11
  • 2149

dhtmlxScheduler日程安排

  • 2010年07月05日 11:38
  • 2.11MB
  • 下载

dhtmlxScheduler 中文文档(一)——How to Start

在这篇教程中我们来考虑创建一个标准的日程表,这个日程表需要从数据库中加载数据,并且可以经过操作后保存到数据库中。文章的后面部门的代码可以作为一个应用日程表的开始。 第一步:新建一个H...
  • wangboxian
  • wangboxian
  • 2015-10-19 17:05:19
  • 4969

javascript日历工作计划 dhtmlxscheduler的说明和使用

一、简介 dhtmlxScheduler是一个JavaScript日程安排控件,类似于Google日历,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天,周,月三个种视...
  • justflyhigh
  • justflyhigh
  • 2013-05-09 10:21:30
  • 6575

调试dhtmlscheduler浏览器兼容性问题

调试dhtmlscheduler浏览器兼容性问题 今天经过一下午的调试,终于修改完了dhtmlscheduler浏览器兼容性的问题。最初在选取这个控件的时候,没有想到过控件的兼容性的问题,但是在实际的...
  • xuqianghit
  • xuqianghit
  • 2010-11-25 20:11:00
  • 582

dhtmlxscheduler使用

本文中主要包含下面几个部分:1.页面中如何初始化dhtmlxscheduler2.dhtmlxscheduler本地化3.如何实现个性化配置4.如何实现数据的持久化1.页面中如何初始化dhtmlxsc...
  • xuqianghit
  • xuqianghit
  • 2010-11-02 11:55:00
  • 3936

dhtmlxScheduler 使用

最近OA系统里要加事件日历,功能像google的日历一样,可以在上面直接拖拽保存事件,在网上发现dhtmlxScheduler已经把这些功能都封装好了,只要自己增加把数据写到数据库的功能就可以了,看了...
  • vince6799
  • vince6799
  • 2011-10-18 13:33:37
  • 5968

日程安排组件dhtmlxScheduler

 dhtmlxScheduler是一个相当不错的日程组件,经过一星期,终于折腾出了个java版的基本应用demo里都有的直接上关键的部分汉化 日期显示格式改这里的代码dhtmlxscheduler.j...
  • bvb09
  • bvb09
  • 2009-12-18 14:07:00
  • 9056

大派用场的Web 开发第三方资源

1. 函数与类库A. CAPTCHACAPTCHA 用来防止恶意表单发布,以下 CAPTCHA 系统可以轻松集成到你的程序中:reCAPTCHA这是目前最流行的 CAPTCHA 机制,该机制同时是一个...
  • aking8736
  • aking8736
  • 2010-03-21 21:46:00
  • 520
收藏助手
不良信息举报
您举报文章:dhtmlxScheduler 使用
举报原因:
原因补充:

(最多只允许输入30个字)