jquery日曆外掛程式FullCalendar提示

簡介

官方網站：
http://arshaw.com/fullcalendar/
英文文檔：
http://arshaw.com/fullcalendar/docs/

使用方法

1. 下載壓縮包fullcalendar-1.6.3.zip解壓
2. 在html頁面中匯入資源

代碼如下	複製代碼
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="js/fullcalendar.min.js"></script>

幾點說明：
FullCalendar需要jquery，如果項目已經引入了jquery，此處不需要重複匯入
如果要在日曆中使用滑鼠拖拽功能，需要匯入jquery-ui
壓縮包中包含的jquery-ui檔案僅包含了jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.resizable.js的功能；如果項目已經引入了包含以上功能的jquery-ui檔案，此處不可重複匯入，重複匯入會造成jquery-ui的其它功能失效
3. 調用外掛程式

代碼如下	複製代碼
$(function(){  $('#calenderDemo').fullCalendar({}); });

配置日曆表頭

代碼如下	複製代碼
$('#calenderDemo').fullCalendar({  header:{   left: 'prev,next today',   center: 'title',   right: 'month,agendaWeek,agendaDay'  } });

left、center、right參數對應頁面表頭三個位置（左、中、右），參數值多個之間可以使用逗號或者空格隔開，可選值範圍如下：
title – 當前日期文本
prev – 向前翻按鈕
next – 向後翻按鈕
prevYear – 前一年按鈕
nextYear – 後一年按鈕
today – 今天按鈕
month – 月視圖
basicWeek – 周視圖
basicDay – 日視圖
agendaWeek – 帶小時周視圖
agendaDay – 帶小時日視圖

配置中文介面

代碼如下	複製代碼
$('#calenderDemo').fullCalendar({  buttonText: {   today: '今天',   month: '月',   week: '周',   day: '天'  },  allDayText: '全天',  monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],  dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], });

議程對象event
日曆中顯示的議程事件

代碼如下	複製代碼
{ title: ‘some name’, start: ’2013-08-08′, end: ’2013-08-12′ }

基本參數說明
title – 事件名稱，顯示在議程中
start – 議程開始時間
end – 議程結束時間
其它參數
id
allDay
url
className
editable
startEditable
durationEditable
source
color
backgroundColor
borderColor
textColor
除此以外，可以根據功能需要在event對象中添加自訂的屬性

顯示議程

代碼如下	複製代碼
$('#calenderDemo').fullCalendar({  events:[] });

添加參數events: array/json string/function
可以為數組：

代碼如下	複製代碼
events: [  {   title: 'All Day Event',   start: new Date()  },  {   title: 'Long Event',   start: new Date(),   end: new Date(new Date().getTime()+86400000)  } ]

可以通過ajax載入json資料：

代碼如下	複製代碼
events: {  url: '/myfeed.php',  type: 'POST',  data: {   custom_param1: 'something',   custom_param2: 'somethingelse'  },  error: function() {   alert('there was an error while fetching events!');  },  color: 'yellow',   // a non-ajax option  textColor: 'black' // a non-ajax option }

也可以是一個function：

代碼如下	複製代碼
events: function(start, end, callback) {  // 取得議程資料後回調  callback(events); }

添加議程
通過點擊日曆儲存格，添加新議程

代碼如下	複製代碼
var calendar = $('#calenderDemo').fullCalendar({  dayClick: function(date, allDay, jsEvent, view) {   // 此處可以進行彈窗、後台通訊等處理   // 本例僅在日曆中添加一個新議程   calendar.fullCalendar('renderEvent',    {     title: '議程' + new Date().getTime(),     start: date,     allDay: allDay    }   );  } });

參數說明
date – 當前日期，在agendaWeek、agendaDay視圖點擊時包含時間
allDay – 在agendaWeek、agendaDay視圖點擊時為false，其它情況為true
jsEvent – 原生javascript事件
view – 當前視圖對象

修改議程
點擊當前顯示的議程，修改議程

代碼如下	複製代碼
var calendar = $('#calenderDemo').fullCalendar({  eventClick : function(event, jsEvent, view) {   // 此處可添加修改議程的代碼   var red = Math.round(255 * Math.random());   var green = Math.round(255 * Math.random());   var blue = Math.round(255 * Math.random());   $(this).css('background-color', 'rgb(' + red + ',' + green + ',' + blue + ')');  } });

event參數為當前點擊的議程

滑鼠拖動改變議程時間範圍
使用滑鼠在頁面上直接拖動改變議程時間範圍，需要jquery-ui的拖拽功能，初始化時需配置參數editable為true來啟用拖動功能。

代碼如下	複製代碼
var calendar = $('#calenderDemo').fullCalendar({  editable : true,  eventDrop : function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {   // 拖動某個議程到新位置時，議程時間改變，此處可做相關處理  } });

參數說明
dayDelta – 儲存了這次拖動導致該議程事件移動了多少天, 向前為正數, 向後為負數
minuteDelta – 儲存了這次拖動導致該議程事件移動了多少分鐘, 向前為正數, 向後為負數，該值只有在agenda view下有效
allDay – 如果在month view下移動, 或在agenda view下移動到all-day地區, 則allDay為true, 移動到agenda view的其他地區則為false
revertFunc – 調用該方法, 可以將剛才的拖動恢複到原狀。這個方法多用於ajax的提交, 移動之後, 提交資料到後台, 如果後台更新失敗, 根據返回訊息, 調用這個方法, 可以使頁面回複原狀

代碼如下	複製代碼
var calendar = $('#calenderDemo').fullCalendar({  editable : true,  eventResize : function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {   // 改變某個議程大小，議程結束時間改變，此處可做相關處理  } });

參數與eventDrop回調類似，以下僅說明不同之處：
dayDelta – 儲存了議程結束時間變化了多少天，向前為正數, 向後為負數
minuteDelta -儲存了議程結束時間變化了多少分鐘, 向前為正數, 向後為負數，該值只有在agenda view下有效，其它情況為0

滑鼠划過選擇一段日期
類似在資源管理員中選擇多個檔案的操作，使用滑鼠在頁面上選擇一段日期進行操作，例如添加議程，需要配置selectable參數為true
在一個儲存格上，滑鼠划過選擇事件select和滑鼠點擊儲存格事件dayClick會被同時觸發

代碼如下	複製代碼
var calendar = $('#calenderDemo').fullCalendar({  selectable : true,  select : function(startDate, endDate, allDay, jsEvent, view) {   // 選中一段日期，此處可做相關處理   // 處理完成後，取消選中狀態   calendar.fullCalendar('unselect');  } });

參數說明
startDate – 開始日期
endDate – 結束日期，當allDay為true時，結束日期包含最後一天