PHP+Mysql+FullCalendar日历拖动与数据保存

浏览:3849 发布日期:2016/12/29 分类:功能实现 关键字: 日历拖动
FullCalendar是一个非常强大的日历插件,我们可以轻松的操作日程安排,诸如新建、修改、删除等操作以及本文将要讲解的拖动、缩放日程事件。
HTML

首先是载入jQuery库,jQuery ui,ullcalendar及弹出层fancybox。<script src='js/jquery.js'></script>  
<script src=js/jquery-ui.js'></script>  
<script src='js/fullcalendar.min.js'></script>  
<script src='js/jquery.fancybox-1.3.1.pack.js'></script>
然后我们在页面中建立日历容器#calendar。<div id="calendar"></div>jQuery

FullCalendar提供了可拖动日程事件的方法,但必须依赖jquery ui的draggable插件。当拖动完毕后,eventDrop回调函数中,我们使用post方式向后台php发送ajax请求,请求的参数包括id:当前拖动事件的id唯一标识,daydiff:拖动前后的天数变更(天数偏移量),minudiff:拖动前后分钟变更(分钟偏移量),allday:是否为全天事件。然后接收后台php处理的结果,如果返回的不是1(拖动处理失败),就弹出提示信息,并且将日程事件恢复到拖动前的状态,请看代码:$(function() {  
    events: 'json.php', //事件数据源  
    editable: true, //允许拖动  
    dragOpacity: {//设置拖动时事件的透明度  
        agenda: .5,  
        '':.6  
    },  
    //拖动事件  
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {  
        $.post("ajax.php?action=drag",{id:event.id,daydiff:dayDelta,  
        minudiff:minuteDelta,allday:allDay},function(msg){  
            if(msg!=1){  
                alert(msg);  
                revertFunc(); //恢复原状  
            }  
        });  
    }  
});
Ajax.php

我们先看增加的处理程序:$action = $_GET['action']; 
if ($action == 'add') { //增加 
    $events = stripslashes(trim($_POST['event'])); //事件内容 
    $events = mysql_real_escape_string(strip_tags($events), $link); //过滤HTML标签,并转义特殊字符 
 
    $isallday = $_POST['isallday']; //是否是全天事件 
    $isend = isset($_POST['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'; //结束时间 
    $endtime = ''; 
    if ($isallday == 1 && $isend == 1) { 
        $starttime = strtotime($startdate); 
        $endtime = strtotime($enddate); 
    } elseif ($isallday == 1 && $isend == "") { 
        $starttime = strtotime($startdate); 
    } elseif ($isallday == "" && $isend == 1) { 
        $starttime = strtotime($startdate . ' ' . $s_time); 
        $endtime = strtotime($enddate . ' ' . $e_time); 
    } else { 
        $starttime = strtotime($startdate . ' ' . $s_time); 
    } 
 
    $colors = array("#360", "#f30", "#06c"); 
    $key = array_rand($colors); 
    $color = $colors[$key]; 
 
    $isallday = $isallday ? 1 : 0; 
    $query = mysql_query("insert into `calendar` (`title`,`starttime`,`endtime`,`allday`,`color`) values ('$events','$starttime','$endtime','$isallday','$color')"); 
    if (mysql_insert_id() > 0) { 
        echo '1'; 
    } else { 
        echo '写入失败!'; 
    } 
} elseif ($action == "edit") { //编辑 
  ....... 
}
最后附上calendar表结构:

--
-- 表的结构 `calendar`
--
CREATE TABLE `calendar` ( 
  `id` int(11) NOT NULL auto_increment, 
  `title` varchar(100) NOT NULL, 
  `starttime` int(11) NOT NULL, 
  `endtime` int(11) default NULL, 
  `allday` tinyint(1) NOT NULL default '0', 
  `color` varchar(20) default NULL, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;
初始化指定某年某月$('#calendar').fullCalendar({ 
   year:"2014", 
   month:"11", 
)}
功能实现,demo下载,参考:http://www.erdangjiade.com/js/107.html
评论( 相关
后面还有条评论,点击查看>>