FullCalendar可以灵活运用到项目开发中，本站上一篇文章中，我们介绍了如何在FullCalendar新建日程事 件，今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件，这样我们就完成了FullCalendar上的“增删改查”一系列操 作。
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()的。
编辑事件
关键是处理日期和时间的显示，当然这也不是本文重点，大家可以下载源码慢慢研究。
我们还需要加入代码处理表单提交和验证，和上文的新建事件一样，我们使用了jquery.form.js插件，代码也基本和新建事件一样。
$(function(){
$(".datepicker").datepicker({minDate: -3,maxDate: 3});
$("#isallday").click(function(){
if($("#sel_start").css("display")=="none"){
$("#sel_start,#sel_end").show();
}else{
$("#sel_start,#sel_end").hide();
}
});
$("#isend").click(function(){
if($("#p_endtime").css("display")=="none"){
$("#p_endtime").show();
}else{
$("#p_endtime").hide();
}
$.fancybox.resize();//调整高度自适应
});
//提交表单
$('#add_form').ajaxForm({
beforeSubmit: showRequest, //表单验证
success: showResponse //成功返回
});
});
function showRequest(){
var events = $("#event").val();
if(events==''){
alert("请输入日程内容！");
$("#event").focus();
return false;
}
}
function showResponse(responseText, statusText, xhr, $form){
if(statusText=="success"){
if(responseText==1){
$.fancybox.close();
$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
}else{
alert(responseText);
}
}else{
alert(statusText);
}
}
do.php
do.php用来处理新建、编辑和删除事件。编辑事件主要是通过接收表单post过来的数据，更新数据表中对应id的事件数据内容，如果更新成功就返回1，那么前端接收到更新成功的消息就会自动关闭fancybox层，并刷新日历视图。
include_once('connect.php');//连接数据库
$action = $_GET['action'];
if($action=='add'){
//新建事件
}elseif($action=="edit"){
//编辑事件
$id = intval($_POST['id']);
if($id==0){
echo '事件不存在！';
exit;
}
$events = stripslashes(trim($_POST['event']));//事件内容
$events=mysql_real_escape_string(strip_tags($events),$link); //过滤HTML标签，并转义特殊字符
$isallday = $_POST['isallday'];//是否是全天事件
$isend = $_POST['isend'];//是否有结束时间
$startdate = trim($_POST['startdate']);//开始日期
$enddate = trim($_POST['enddate']);//结束日期
$s_time = $_POST['s_hour'].':'.$_POST['s_minute'].':00';//开始时间
$e_time = $_POST['e_hour'].':'.$_POST['e_minute'].':00';//结束时间
if($isallday==1 && $isend==1){
$starttime = strtotime($startdate);
$endtime = strtotime($enddate);
}elseif($isallday==1 && $isend==""){
$starttime = strtotime($startdate);
$endtime = 0;
}elseif($isallday=="" && $isend==1){
$starttime = strtotime($startdate.' '.$s_time);
$endtime = strtotime($enddate.' '.$e_time);
}else{
$starttime = strtotime($startdate.' '.$s_time);
$endtime = 0;
}
$isallday = $isallday?1:0;
mysql_query("update `calendar` set `title`='$events',`starttime`='$starttime',`endtime`='$endtime',
`allday`='$isallday' where `id`='$id'");
if(mysql_affected_rows()==1){
echo '1';
}else{
echo '出错了！';
}
}elseif($action=="del"){
//删除事件
}else{
}
删除日程事件
在弹出的编辑表单层中，还有一个删除按钮，当我们点击删除按钮时，同样的发送ajax请求到do.php中，由do.php根据请求删除数据表中对应的日程记录，并返回成功的信息。
在event.php中还应该加上一段js：
$(function(){
...
//删除事件
$("#del_event").click(function(){
if(confirm("您确定要删除吗？")){
var eventid = $("#eventid").val();
$.post("do.php?action=del",{id:eventid},function(msg){
if(msg==1){//删除成功
$.fancybox.close();
$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
}else{
alert(msg);
}
});
}
});
});
do.php也要加上删除操作。
...
}elseif($action=="del"){//删除
$id = intval($_POST['id']);
if($id>0){
mysql_query("delete from `calendar` where `id`='$id'");
if(mysql_affected_rows()==1){
echo '1';
}else{
echo '出错了！';
}
}else{
echo '事件不存在！';
}
}
好了，本文介绍了编辑和删除fullCalendar日历事件，文中给出的代码不是连贯的，建议不要直接复制使用，您可以看明白了再测试，当然，如 果你够懒，可以下载本文提供的打包文件，包括读取、新建、编辑和删除日程事件功能。Hellwoeba.com感谢您的关注，接下来月光光会对 fullCalendar的最后一个操作：拖动及保存日程事件做讲解以及总结，敬请关注。
来源于helloweba.com 》 FullCalendar应用——编辑与删除日程事件