2019独角兽企业重金招聘Python工程师标准>>>
FullCalendar可以灵活运用到项目开发中,本站上一篇文章中,我们介绍了如何在FullCalendar新建日程事件,今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件,这样我们就完成了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()的。
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 = $ startdate ; $ end_chk = '' ; $ end_display = "style='display:none'" ; }else { $ end_d = date("Y-m-d" ,$ endtime ); $ end_h = date("H" ,$ endtime ); $ end_m = date("i" ,$ endtime ); $ end_chk = "checked" ; $ end_display = "style=''" ; } $ allday = $ row ['allday' ]; if ($ allday ==1 ){ $ display = "style='display:none'" ; $ allday_chk = "checked" ; }else { $ display = "style=''" ; $ allday_chk = '' ; } } ?> rel ="stylesheet" type ="text/css" href ="css/jquery-ui.css" >
}?>
关键是处理日期和时间的显示,当然这也不是本文重点,大家可以下载源码慢慢研究。
我们还需要加入代码处理表单提交和验证,和上文的新建事件一样,我们使用了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 '事件不存在!' ; } }