fullcalendar php,日历插件fullcalendar+php的使用教程 — 读取json数据

根据FullCalendar日历插件说明文档中的介绍，日历主体事件数据的来源有三，一是直接以javascript数组的形式显示日历事件，二是获取JSON数据形式显示日历事件，三是函数回调的形式显示日历数据，三种调用数据的方式各有所用之处，通常我们在实际项目中会结合数据库，通过PHP等后台语言来读取数据库的数据，并以json格式返回给前端，FullCalendar再处理接收的json数据显示在日历中。

HTML

一切像前面文章：日程安排FullCalendar介绍的一样，在页面中载入必要的javascript和css文件。

然后，在页面的body里加入div#calendar，用来放置日历主体。

jQuery

我们用以下代码调用FullCalendar，保存后浏览，我们可以看到页面中呈现一个漂亮的日历表，但是日历中没有具体的事件内容，我们使用FullCalendar最主要的是要在FullCalendar中展示日程安排中的事件，给用户直观的展示过去或未来时间内安排的事情。FullCalendar中的事件数据来源在events选项控制，当然如果是有多个数据来源可以使用eventSources选项。

$(function() {

$('#calendar').fullCalendar({

header: {//设置日历头部信息

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

},

firstDay:1,//每行第一天为周一

editable: true,//可以拖动

events: 'json.php'    //事件数据

});

});

PHP

从jQuery代码中我们可以看出，FullCalendar所有事件数据来自于json.php。json.php通过连接后台MySQL数据库，读取符合条件的事件数据，并最终以JSON数据格式的形式返回，请看代码：

include_once('connect.php');//连接数据库

$sql = "select * from calendar";

$query = mysql_query($sql);

while($row=mysql_fetch_array($query)){

$allday = $row['allday'];

$is_allday = $allday==1?true:false;

$data[] = array(

'id' => $row['id'],//事件id

'title' => $row['title'],//事件标题

'start' => date('Y-m-d H:i',$row['starttime']),//事件开始时间

'end' => date('Y-m-d H:i',$row['endtime']),//结束时间

'allDay' => $is_allday, //是否为全天事件

'color' => $row['color'] //事件的背景色

);

}

echo json_encode($data);

值得一提的是，在返回的json数据中，每个字段如id，title..对应着FullCalendar的Event Object事件对象中的属性id，title..。

我们将最终数据以json_encode()输出，然后，前端FullCalendar会解析json数据并显示在日历中，这些FullCalendar都替我们做好了，只管刷新前端页面看下效果吧。

FullCalendar的读取数据操作很简单，接下来我们会讲述如何在FullCalendar日历中新增、修改和删除事件，敬请关注。

最后附上demo中的MySQL数据表calendar的表结构：

CREATE TABLE IF NOT EXISTS `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