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

收藏

FullCalendar是一个非常强大的日历插件，我们可以轻松的操作日程安排，诸如新建、修改、删除等操作以及本文将要讲解的拖动、缩放日程事件。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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",
)}

FullCalendar相关API