FullCalendar应用——拖动与实时保存

jerry JQuery 2015年08月20日 收藏

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

HTML

我们将日程页面命名为drag.html,首先是要载入jQuery库,jQuery ui以及fullcalendar插件。

  1. <script src='js/jquery-1.9.1.min.js'></script>
  2. <script src='js/jquery-ui-1.10.3.custom.min.js'></script>
  3. <script src='js/fullcalendar.min.js'></script>

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

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

jQuery

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

  1. $(function() {
  2. events: 'json.php', //事件数据源
  3. editable: true, //允许拖动
  4. dragOpacity: {//设置拖动时事件的透明度
  5. agenda: .5,
  6. '':.6
  7. },
  8. //拖动事件
  9. eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
  10. $.post("do.php?action=drag",{id:event.id,daydiff:dayDelta,
  11. minudiff:minuteDelta,allday:allDay},function(msg){
  12. if(msg!=1){
  13. alert(msg);
  14. revertFunc(); //恢复原状
  15. }
  16. });
  17. }
  18. });

PHP

当拖动结束时,FullCalendar向后台do.php发送了ajax请求。和增删改操作一样,do.php接收action动作参数,首先处理post过来的内容,然后查询数据表中对应的日程事件项,根据是否为全天事件以及是否有结束时间两个条件来构造不同的SQL语句,最后更新数据表,并返回处理结果,请看代码:

  1. ...
  2. }elseif($action=="drag"){//拖动
  3. $id = $_POST['id'];
  4. $daydiff = (int)$_POST['daydiff']*24*60*60;
  5. $minudiff = (int)$_POST['minudiff']*60;
  6. $allday = $_POST['allday'];
  7. $query = mysql_query("select * from `calendar` where id='$id'");
  8. $row = mysql_fetch_array($query);
  9. if($allday=="true"){//如果是全天事件
  10. if($row['endtime']==0){
  11. $sql = "update `calendar` set starttime=starttime+'$daydiff' where id='$id'";
  12. }else{
  13. $sql = "update `calendar` set starttime=starttime+'$daydiff',endtime=endtime+'$daydiff'
  14. where id='$id'";
  15. }
  16. }else{
  17. $difftime = $daydiff + $minudiff;
  18. if($row['endtime']==0){
  19. $sql = "update `calendar` set starttime=starttime+'$difftime' where id='$id'";
  20. }else{
  21. $sql = "update `calendar` set starttime=starttime+'$difftime',endtime=endtime+'$difftime'
  22. where id='$id'";
  23. }
  24. }
  25. $result = mysql_query($sql);
  26. if(mysql_affected_rows()==1){
  27. echo '1';
  28. }else{
  29. echo '出错了!';
  30. }
  31. }

以上代码关键在于处理日程事件的开始时间和结束事件,这样,就实现了可以任意拖动日程事件项并实时保存,看下demo,是不是很酷哦。

总结

关于日程事件的缩放

所谓缩放,其实就是用户可以直接在日历视图中将日程事件拉长和缩短,比如事件为一天的变成两天,10:00结束的会议变成9:30,只需在日历视图中将对应的日程事件项向右(月视图)或向下(周视图和日视图)拉长或缩短。使用FullCalendar提供的eventResize方法轻松搞定。

  1. eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
  2. $.post("do.php?action=resize",{id:event.id,daydiff:dayDelta,minudiff:minuteDelta},function(msg){
  3. if(msg!=1){
  4. alert(msg);
  5. revertFunc();
  6. }
  7. });
  8. }

关于选取多天

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

  1. selectable: true, //允许用户拖动
  2. select: function( startDate, endDate, allDay, jsEvent, view ){
  3. var start =$.fullCalendar.formatDate(startDate,'yyyy-MM-dd');
  4. var end =$.fullCalendar.formatDate(endDate,'yyyy-MM-dd');
  5. $.fancybox({
  6. 'type':'ajax',
  7. 'href':'event.php?action=add&date='+start+'&end='+end
  8. });
  9. }

关于多用户共享

要将FullCalendar应用到项目中去,一般是针对多用户使用的,如CRM系统中会有多个用户共享日程,上级可查看下级的日程安排及工作进度,同级用户不能查看对方的日程,这些需求是在项目设计的时候就得定好,当然数据库的设计是至关重要的,这里不再多描述。

不足

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

结束

FullCalendar系列文章讲述了FullCalendar的基本应用,API文档,读取数据库,新建、修改和删除操作,以及拖动、缩放和选取,足以满足大型项目应用场景的需求,至此关于FullCalendar的文章本站就此收官,如有FullCalendar相关问题欢迎大家留言讨论,Helloweba感谢您的关注。

下载地址