jquery日歷插件FullCalendar使用技巧

原文鏈接： http://blog.csdn.net/u013493957/article/details/44920341

 

FullCalendar是一款基於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()[phone])  } ]

可以通過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時，結束日期包含最后一天