FullCalendar可以灵活运用到项目开发中,本站上一篇文章中,我们介绍了如何在FullCalendar新建日程事件,今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件,这样我们就完成了FullCalendar上的“增删改查”一系列操作。
$(function() { $('#calendar').fullCalendar({ //单击事件项时触发 eventClick: function(calEvent, jsEvent, view) { $.fancybox({ 'type':'ajax', 'href':'event.php?action=edit&id='+calEvent.id }); } });});event.php<?phpfunction 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 = ''; } }?><link rel="stylesheet" type="text/css" href="css/jquery-ui.css"><div class="fancy"> <h3>编辑事件</h3> <form id="add_form" action="do.php?action=edit" method="post"> <input type="hidden" name="id" id="eventid" value="<?php echo $id;?>"> <p>日程内容:<input type="text" class="input" name="event" id="event" style="width:320px" placeholder="记录你将要做的一件事..." value="<?php echo $title;?>"></p> <p>开始时间:<input type="text" class="input datepicker" name="startdate" id="startdate" value="<?php echo $start_d;?>" readonly> <span id="sel_start" <?php echo $display;?>><select name="s_hour"> <option value="<?php echo $start_h;?>" selected><?php echo $start_h;?></option> <option value="00">00</option> ...//这里省略多个option,下同 </select>: <select name="s_minute"> <option value="<?php echo $start_m;?>" selected><?php echo $start_m;?></option> <option value="00">00</option> ... </select> </span> </p> <p id="p_endtime" <?php echo $end_display;?>>结束时间:<input type="text" class="input datepicker" name="enddate" id="enddate" value="<?php echo $end_d;?>" readonly> <span id="sel_end" <?php echo $display;?>><select name="e_hour"> <option value="<?php echo $end_h;?>" selected><?php echo $end_h;?></option> ... </select>: <select name="e_minute"> <option value="<?php echo $end_m;?>" selected><?php echo $end_m;?></option> ... </select> </span> </p> <p> <label><input type="checkbox" value="1" id="isallday" name="isallday" <?php echo $allday_chk;?>> 全天</label> <label><input type="checkbox" value="1" id="isend" name="isend" <?php echo $end_chk;?>> 结束时间</label> </p> <div class="sub_btn"><span class="del"><input type="button" class="btn btn_del" id="del_event" value="删除"></span><input type="submit" class="btn btn_ok" value="确定"> <input type="button" class="btn btn_cancel" value="取消" onClick="$.fancybox.close()"></div> </form></div><?php }?>$(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); }}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{ }在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); } }); } });});...}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 '事件不存在!'; }}
零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。