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

最新推荐文章于 2024-07-05 08:41:30 发布

原创

最新推荐文章于 2024-07-05 08:41:30 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#php #数据库 #javascript #ViewUI

本文介绍了如何使用FullCalendar实现日程事件的拖动操作，并通过jQuery和PHP实现实时保存。在拖动结束后，通过AJAX向后台发送请求，更新数据表中的事件时间，同时处理日程的缩放、选取多天以及多用户共享等功能。FullCalendar的这些特性使得在项目中管理日程变得更加便捷高效。

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

查看演示DEMO 下载源码

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>

jQuer

最低0.47元/天解锁文章