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()+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時，結束日期包含最後一天