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()的。
<?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 = $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 }?>
关键是处理日期和时间的显示,当然这也不是本文重点,大家可以下载源码慢慢研究。
我们还需要加入代码处理表单提交和验证,和上文的新建事件一样,我们使用了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的最后一个操作:拖动及保存日程事件做讲解以及总结,敬请关注。
相关推荐
其中,FullCalendar是一款广泛使用的JavaScript库,它提供了丰富的功能,包括创建、编辑和删除日程事件。本篇文章将深入探讨如何在FullCalendar中实现这些操作。 首先,我们来了解FullCalendar的基本概念。...
2. **事件插入与编辑**:用户可以通过界面直接添加新的事件,或者编辑已有的事件,包括修改时间、地点、描述等信息。 3. **拖放功能**:支持事件的拖放操作,用户可以将事件在不同的时间段之间自由移动,实时更新...
- **事件管理**:你可以添加、编辑和删除事件,并且可以设置事件的开始和结束时间,以及颜色等属性。 - **时间区处理**:FullCalendar支持不同的时区,这对于有国际用户的项目来说至关重要。 - **拖放功能**:用户...
全尺寸拖放事件日历——前端项目-fullcalendar.zip是一个包含前端开发资源的压缩包,主要聚焦于使用FullCalendar库创建的交互式日历应用。FullCalendar是一款强大的JavaScript库,用于在网页上展示日程和事件,它...
全尺寸的拖放事件日历——FullCalendar是一个强大的JavaScript库,专为构建功能丰富的日历应用而设计。它以其灵活性、可定制性和易用性在Web开发领域中广受好评。FullCalendar支持多种视图,如日视图、周视图、月...
**全历日历模块——fullcalendar** 全历日历(FullCalendar)是一个强大的JavaScript插件,主要用于构建功能丰富的拖放事件日历。它在MC4(可能是某个项目或框架的版本)中作为自定义模块存在,为用户提供了高度可...
**全尺寸日历插件——fullCalendar** fullCalendar是一款功能强大的JavaScript日历插件,它允许用户在网页上创建互动式、美观的日历视图。这个插件支持多种视图,如日视图、周视图、月视图,以及基本的列表视图,...
插件通常提供API来添加、编辑和删除事件。 3. 日历集成:结合jQuery插件与后端服务,可以实现日程同步,比如Google Calendar或Outlook,允许用户在多平台间共享和管理日程。 4. 提醒与通知:通过AJAX技术,可以实现...
《jQuery日历插件详解与应用实践》 在Web开发中,日历插件是一种常见的交互元素,用于显示日期选择器或创建日程管理功能。jQuery作为一款强大的JavaScript库,提供了丰富的插件来简化此类任务。本文将深入探讨...
它提供了多种视图,如日视图、周视图、月视图、列表视图等,支持事件的添加、编辑和删除,使得日程管理变得更加便捷。本实践主要围绕`fullCalendar`的使用进行详细介绍,旨在帮助开发者更好地理解和应用这个工具。 ...
fullCalendar是一款流行的JavaScript日历插件,它能够显示各种事件,并支持拖放操作,使得用户可以方便地管理日程安排。 首先,我们要了解如何将Angular UI-Calendar集成到项目中。在解压后的"ui-calendar-master...
《周日历js插件——weeklyCalendar:专为一周日期展示设计》 在现代Web开发中,日历插件是不可或缺的一部分,它们为用户提供了直观的时间管理方式。本文将深入探讨一个专注于一周日期显示的JavaScript插件——...
它不仅能够显示事件,还能处理事件的创建、更新和删除,对于管理日程安排非常实用。此外,`FullCalendar`兼容各种前端框架,如React、Angular和Vue,且拥有丰富的API和插件系统,可满足各种复杂的交互需求。 第三款...
例如,jQuery UI的Datepicker提供了丰富的自定义选项,包括日期格式、多语言支持、日期限制等,而FullCalendar则更加强调日程管理,支持日、周、月等多种视图。 在实际应用中,考虑到性能和用户体验,应优化日历...