欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

FullCalendar应用——拖动与及时生涯

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

我们可以行使FullCalendar成立一个很是强盛的日历措施,用户可以轻松的在FullCalendar操纵日程布置,诸如新建、修改、删除等操纵以及本文将要讲授的拖动、缩放日程变乱。

HTML

我们将日程页面定名为drag.Html,起首是要载入jQuery库,jQuery ui以及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>

然后在body中,成立日历容器div#calendar。

<div id="calendar"></div>

jQuery

FullCalendar提供了可拖动日程变乱的要领,但必需依靠jquery ui的draggable插件。当拖动完毕后,eventDrop回调函数中,我们行使post方法向靠山php发送ajax哀求,哀求的参数包罗id:当前拖动变乱的id独一标识,daydiff:拖动前后的天数改观(天数偏移量),minudiff:拖动前后分钟改观(分钟偏移量),allday:是否为全天变乱。然后吸取靠山php处理赏罚的功效,假如返回的不是1(拖动处理赏罚失败),就弹出提醒信息,而且将日程变乱规复到拖动前的状态,请看代码:

$(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(); //恢复兴状
			}
		});
    }
});

PHP

当拖动竣事时,FullCalendar向靠山do.php发送了ajax哀求。和增编削操纵一样,do.php吸取action举措参数,起首处理赏罚post过来的内容,然后查询数据表中对应的日程变乱项,按照是否为全天变乱以及是否有竣事时刻两个前提来结构差异的SQL语句,最后更新数据表,并返回处理赏罚功效,请看代码:

...
}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 '堕落了!';	
	}
}

以上代码要害在于处理赏罚日程变乱的开始时刻和竣事情乱,这样,就实现了可以恣意拖动日程变乱项并及时生涯,看下demo,是不是很酷哦。

总结

关于日程变乱的缩放

所谓缩放,着实就是用户可以直接在日历视图中将日程变乱拉长和收缩,好比变乱为一天的酿成两天,10:00竣事的集会会议酿成9:30,只需在日历视图中将对应的日程变乱项向右(月视图)或向下(周视图和日视图)拉长或收缩。行使FullCalendar提供的eventResize要领轻松搞定。

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();
		}
	});
}

关于选取多天

FullCalendar提供了select要领,用户可以在新建多天日程的时辰,一次性选择连贯的日期,然后弹出的新建日程中会自动补全开始日期和竣事日期,这个操纵只需按住开始日期,然后拖动鼠标到竣事日期,松开左键即可,快去demo中操纵下吧。

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
	});
}

关于多用户共享

要将FullCalendar应用到项目中去,一样平常是针对多用户行使的,如CRM体系中会有多个用户共享日程,上级可查察下级的日程布置及事变进度,同级用户不能查察对方的日程,这些需求是在项目计划的时辰就得定好,虽然数据库的计划是至关重要的,这里不再多描写。

不敷

独一遗憾的是日历中没有中国夏历历法,哪位大神能将中国夏历历法移植到FullCalendar中,将会对FullCalendar在中国的应用做出卓越的孝顺。

竣事

FullCalendar系列文章报告了FullCalendar的根基应用,API文档,读取数据库,新建、修改和删除操纵,以及拖动、缩放和选取,足以满意大型项目应用场景的需求,至此关于FullCalendar的文章本站就此收官,若有FullCalendar相干题目接待各人留言接头,Helloweba感激您的存眷。

本文地址:http://itbyc.com/web/javascript/13682.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1