根據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

總結

以上是生活随笔為你收集整理的fullcalendar php,日历插件fullcalendar+php的使用教程 — 读取json数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。