您现在的位置是:网站首页 > 脚本编程>

ThinkPhp+Mysql+FullCalendar日历拖动与数据保存

2016-01-06551人围观
简介 FullCalendar提供了可拖动日程事件的方法,但必须依赖jquery ui的draggable插件。当拖动完毕后,eventDrop回调函数中,我们使用post方式向后台php发送ajax请求,请求的参数包括id:当前拖动事件的id唯一标识,daydiff:拖动前后的天数变更(天数偏移量),minudiff:拖动前后分钟变更(分钟偏移量),allday:是否为全天事件。然后接收后台php处理的结果,如果返回的不是1(拖动处理失败),就弹出提示信息,并且将日程事件恢复到拖动前的状态

效果图:

FullCalendar提供了可拖动日程事件的方法,但必须依赖jquery ui的draggable插件。当拖动完毕后,eventDrop回调函数中,我们使用post方式向后台php发送ajax请求,请求的参数包括id: 当前拖动事件的id唯一标识,daydiff:拖动前后的天数变更(天数偏移量),minudiff:拖动前后分钟变更(分钟偏移量),allday:是 否为全天事件。然后接收后台php处理的结果,如果返回的不是1(拖动处理失败),就弹出提示信息,并且将日程事件恢复到拖动前的状态。

html代码:

<div class="container">
	<div class="demo">
		<div id='calendar'></div>
	</div>
</div>
<script type="text/javascript" src="/Public/js/jquery.js"></script> 
<script src='/Public/js/jquery-ui.js'></script>
<script src='/Public/js/fullcalendar.min.js'></script>
<script src='/Public/js/jquery.fancybox-1.3.1.pack.js'></script>
<script type="text/javascript">
	$(function() {
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			dragOpacity: {
				agenda: .5,
				'': .6
			},
			eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
				$.post("{:U('Ajax/index')}?action=drag", {id: event.id, daydiff: dayDelta, minudiff: minuteDelta, allday: allDay}, function(msg) {
					if (msg != 1) {
						alert(msg);
						revertFunc();
					}
				});
			},
			eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
				$.post("{:U('Ajax/index')}?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': '{:U("Even/index")}?action=add&date=' + start + '&end=' + end
				});
			},
			events: '{:U("Json/index")}',
			dayClick: function(date, allDay, jsEvent, view) {
				var selDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
				$.fancybox({
					'type': 'ajax',
					'href': '{:U("Even/index")}?action=add&date=2015-05-07'
				});
			},
			eventClick: function(calEvent, jsEvent, view) {
				$.fancybox({
					'type': 'ajax',
					'href': '{:U("Even/index")}?action=edit&id=' + calEvent.id
				});
			}
		});
	});
</script>

由于代码过于太多就不一一贴出点击下面链接下载代码及数据库。

链接:https://pan.baidu.com/s/10mgo8kwiejQhHon0SPlyvw 

提取码:a9oz 

官方文档地址:http://arshaw.com/fullcalendar/docs/

FullCalendar 官方文档翻译:http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

打赏本站,你说多少就多少

精彩评论

微信关注

Copyright © 2013-2019 千奇博客 保留所有权利 辽ICP备13008238号