FullCalendar 五：FullCalendar应用——编辑与删除日程事件

最新推荐文章于 2024-08-09 07:39:43 发布

iteye_5904

最新推荐文章于 2024-08-09 07:39:43 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/iteye_5904/article/details/82571725

版权

本文介绍如何在FullCalendar中实现编辑和删除日程事件，通过jQuery调用fancybox弹出编辑层，利用eventClick方法，结合event.php和do.php处理数据操作。在do.php中处理新建、编辑和删除事件，使用ajax进行交互，完成日历事件的“增删改查”。

摘要由CSDN通过智能技术生成

FullCalendar可以灵活运用到项目开发中，本站上一篇文章中，我们介绍了如何在FullCalendar新建日程事件，今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件，这样我们就完成了FullCalendar上的“增删改查”一系列操作。

查看演示DEMO 下载源码

HTML

和上一篇文章FullCalendar应用——新建日程事件一样，HTML页面我们仍然使用cal_opt.html，这里HTML代码及相关js和css文件的载入就不再详述，如果您是第一次阅读本文，请先从FullCalendar系列文章第一篇看起。

jQuery

在日历视图中，我们通过单击需要编辑的日程事件项，调用fancybox弹出编辑层。FullCalendar提供了事件单击eventClick方法，请看代码：

$(function() { 
    $('#calendar').fullCalendar({ 
        //单击事件项时触发 
        eventClick: function(calEvent, jsEvent, view) { 
            $.fancybox({ 
                'type':'ajax', 
                'href':'event.php?action=edit&id='+calEvent.id 
            }); 
        } 
    }); 
});

单击事件项，调用了fancybox，和新建事件一样，采用ajax方式，通过传参，请求了编辑表单页面。

event.php

event.php根据请求过来的参数，读取对应id的日历事件，并将数据完整的现实在编辑表单中。我们将整个读取与显示编辑层的代码混编在 event.php中，当然实际开发中，你可能会使用zend、thinkphp等框架，让PHP和html模板分离。下面的代码我们将编辑模块写在了自定义函数editform()中，那么event.php是根据传递的action参数来调用editform()的。

<?php 
function editform($id){ 
    $query = mysql_query("select * from calendar where id='$id'"); 
    $row = mysql_fetch_array($query); 
    if($row){ 
        $id = $row['id']; 
        $title = $row['title']; 
        $starttime = $row['starttime']; 
        $start_d = date("Y-m-d",$starttime); 
        $start_h = date("H",$starttime); 
        $start_m = date("i",$starttime); 
         
        $endtime = $row['endtime']; 
        if($endtime==0){ 
            $end_d = $st