FullCalendar-日志事件拖动效果

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

查看演示DEMO 下载源码

 

HTML

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

Html代码  

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。

Html代码  

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

 

jQuery

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

Js代码  

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语句，最后更新数据表，并返 回处理结果，请看代码：

Php代码  

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.        
10.     if($allday=="true"){//如果是全天事件   
11.         if($row['endtime']==0){   
12.             $sql = "update `calendar` set starttime=starttime+'$daydiff' where id='$id'";   
13.         }else{   
14.             $sql = "update `calendar` set starttime=starttime+'$daydiff',endtime=endtime   
15. +'$daydiff' where id='$id'";   
16.         }   
17.            
18.     }else{   
19.         $difftime = $daydiff + $minudiff;   
20.         if($row['endtime']==0){   
21.             $sql = "update `calendar` set starttime=starttime+'$difftime' where id='$id'";   
22.         }else{   
23.             $sql = "update `calendar` set starttime=starttime+'$difftime',endtime=endtime   
24. +'$difftime' where id='$id'";   
25.         }   
26.     }   
27.     $result = mysql_query($sql);   
28.     if(mysql_affected_rows()==1){   
29.         echo '1';   
30.     }else{   
31.         echo '出错了！';       
32.     }   
33. }   

 

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

 

总结

 

关于日程事件的缩放

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

Js代码  

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中操作下吧。

Js代码  

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感谢您的关注。

 

来源于helloweba.com 》 FullCalendar应用——拖动与实时保存

• fullcalendar_drag.zip (75.9 KB)
• 下载次数: 25