FullCalendar應用——讀取JSON資料

標籤：style   blog   class   code   java   tar   

開發人員可以使用FullCalendar建立強大的日曆議程應用，FullCalendar提供了豐富的選項設定和方法調用，使得開發人員可以輕鬆的建立各種功能的行事曆程式。本文將結合執行個體使用PHP讀取MySQl資料，顯示在FullCalendar日曆中。

查看示範DEMO

根據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裡加入div#calendar，用來放置日曆主體。

 
<div id=‘calendar‘></div> 

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 

轉載 http://www.helloweba.com/view-blog-232.html