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

评论() 相关

收藏

赞

秋木苏

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。