FullCalendar應用中如何讀取JSON數據

FullCalendar應用中如何讀取JSON數據，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

開發者可以使用FullCalendar創建強大的日歷日程應用，FullCalendar提供了豐富的選項設置和方法調用，使得開發者可以輕松的創建各種功能的日歷程序。本文將結合實例使用PHP讀取MySQl數據，顯示在FullCalendar日歷中。

根據FullCalendar日歷插件說明文檔中的介紹，日歷主體事件數據的來源有三，一是直接以javascript數組的形式顯示日歷事件，二是獲取JSON數據形式顯示日歷事件，三是函數回調的形式顯示日歷數據，三種調用數據的方式各有所用之處，通常我們在實際項目中會結合數據庫，通過PHP等后臺語言來讀取數據庫的數據，并以json格式返回給前端，FullCalendar再處理接收的json數據顯示在日歷中。

HTML

一切像前面文章：日程安排FullCalendar介紹的一樣，在頁面中載入必要的javascript和css文件。

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-ui-1.10.2.custom.min.js"></script> <script src="js/fullcalendar.min.js"></script>

然后，在頁面的body里加入p#calendar，用來放置日歷主體。

<p id='calendar'></p>

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應用中如何讀取JSON數據的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！