广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    FullCalendar拖动与实时保存

    2018-04-13 09:16:39 次阅读 稿源:互联网
    零七广告

    我们可以使用FullCalendar建立一个非常强大的日历程序,用户可以轻松的在FullCalendar操作日程安排,诸如新建、修改、删除等操作以及本文将要讲解的拖动、缩放日程事件。

    <script src='js/jquery-1.9.1.min.js'></script><script src='js/jquery-ui-1.10.3.custom.min.js'></script><script src='js/fullcalendar.min.js'></script>
    <div id="calendar"></div>
    $(function() {	events: 'json.php', //事件数据源	editable: true, //允许拖动	dragOpacity: {//设置拖动时事件的透明度		agenda: .5,		'':.6	},    //拖动事件	eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {		$.post("do.php?action=drag",{id:event.id,daydiff:dayDelta,        minudiff:minuteDelta,allday:allDay},function(msg){			if(msg!=1){				alert(msg);				revertFunc(); //恢复原状			}		});    }});
    ...}elseif($action=="drag"){//拖动	$id = $_POST['id'];	$daydiff = (int)$_POST['daydiff']*24*60*60;	$minudiff = (int)$_POST['minudiff']*60;	$allday = $_POST['allday'];	$query  = mysql_query("select * from `calendar` where id='$id'");	$row = mysql_fetch_array($query);		if($allday=="true"){//如果是全天事件		if($row['endtime']==0){			$sql = "update `calendar` set starttime=starttime+'$daydiff' where id='$id'";		}else{			$sql = "update `calendar` set starttime=starttime+'$daydiff',endtime=endtime+'$daydiff' where id='$id'";		}			}else{		$difftime = $daydiff + $minudiff;		if($row['endtime']==0){			$sql = "update `calendar` set starttime=starttime+'$difftime' where id='$id'";		}else{			$sql = "update `calendar` set starttime=starttime+'$difftime',endtime=endtime+'$difftime' where id='$id'";		}	}	$result = mysql_query($sql);	if(mysql_affected_rows()==1){		echo '1';	}else{		echo '出错了!';		}}
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) {	$.post("do.php?action=resize",{id:event.id,daydiff:dayDelta,minudiff:minuteDelta},function(msg){		if(msg!=1){			alert(msg);			revertFunc();		}	});}
    selectable: true, //允许用户拖动select: function( startDate, endDate, allDay, jsEvent, view ){	var start =$.fullCalendar.formatDate(startDate,'yyyy-MM-dd');	var end =$.fullCalendar.formatDate(endDate,'yyyy-MM-dd');	$.fancybox({		'type':'ajax',		'href':'event.php?action=add&date='+start+'&end='+end	});}

    不足

    结束

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告