FullCalendar日曆插件說明文檔

普通顯示設置

屬性	描述	默認值
header	設置日曆頭部信息。 若是設置爲false，則不顯示頭部信息。包括left，center,right左中右三個位置，每一個位置均可以對應如下不一樣的配置： title: 顯示當前月份/周/日信息 prev: 用於切換到上一月/周/日視圖的按鈕 next: 用於切換到下一月/周/日視圖的按鈕 prevYear：用於切換到上一年視圖的按鈕 nextYear：用於切換到下一年視圖的按鈕	{ left: 'title', center: '', right: 'today prev,next' }
theme	是否容許使用jquery的ui主題，若是設置爲true，則須要加載jquery ui相關css和js文件。 查看演示	false
buttonIcons	設置header中使用的prev, next等變量對應按鈕的樣式，只有當theme爲true時纔有效，若是你調用了jQuery ui樣式但又不想使用它的圖標樣式，能夠將此屬性設置爲false	{ prev: 'circle-triangle-w', next: 'circle-triangle-e' }
firstDay	設置一週中顯示的第一天是哪天，週日是0，週一是1，類推。	0
isRTL	設置爲ture時則日曆從右往左顯示，貌似是針對阿拉伯人設計的。	false
weekends	是否顯示週末，設爲false則不顯示週六和週日。	true
hiddenDays	隱藏一週中的某一天或某幾天，數組形式，如隱藏週二和週五：[2,5]，默認不隱藏，除非weekends設置爲false。	[]
weekMode	在月視圖裏顯示周的模式，由於每個月週數可能不一樣，因此月視圖高度不必定。 fixed：固定顯示6周高，日曆高度保持不變 liquid：不固定週數，高度隨週數變化 variable：不固定週數，但高度固定	'fixed'
weekNumbers	是否在日曆中顯示周次(一年中的第幾周)，若是設置爲true，則會在月視圖的左側、周視圖和日視圖的左上角顯示週數。	false
weekNumberCalculation	周次的顯示格式。	"iso"
height	設置日曆的高度，包括header日曆頭部，默認未設置，高度根據aspectRatio值自適應。
contentHeight	設置日曆主體內容的高度，不包括header部分，默認未設置，高度根據aspectRatio值自適應。
aspectRatio	設置日曆單元格寬度與高度的比例。	1.35
handleWindowResize	是否隨瀏覽器窗口大小變化而自動變化。	true
windowResize	callback，當瀏覽器窗口變化時觸發function，使用： $('#calendar').fullCalendar({ windowResize: function(view) { alert('The calendar has adjusted to a window resize'); } });
render	method，綁定日曆到id上。 $('#id').fullCalendar('render');
destroy	method，銷燬id日曆，把日曆回覆到初始化前狀態。 $('#id').fullCalendar('destroy');

視圖

FullCalendar提供五種可用視圖，包括month（月視圖），basicWeek（基本週視圖，左側不顯示具體時間），basicDay（基本日視圖，左側不顯示具體時間），agendaWeek（周視圖），agendaDay（日視圖）。

View視圖對象的屬性：

屬性	描述
name	包括month,basicWeek,basicDay,agendaWeek,agendaDay
title	標題內容(例如"2013年9月" or "Sep 7 - 13 2013")
start	Date類型, 該view下的第一天
end	Date類型, 該view下的最後一天. 因爲是一個閉合的值, 因此, 好比在month view下, 10月這個月份, 那麼end對應的應該是11月的第一天
visStart	Date類型. 在該view下第一個能夠訪問的day. month view下, 該值是當月的第一天, week view下, 則一般和start一致
visEnd	Date類型, 最後一個可訪問的day

View其餘屬性和方法

屬性	描述	默認值
defaultView	日曆初始化時默認視圖	'month'
getView	method，取得視圖對象信息，如獲取當前視圖的標題內容： var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title);
changeView	method，切換視圖 .fullCalendar('changeView',viewName) viewName爲5種視圖中的一種

日程選項

如下選項設置適用於agendaWeek和agendaDay視圖裏。

屬性	描述	默認值
allDaySlot	在agenda視圖模式下，是否在日曆上方顯示all-day(全天)	true
allDayText	定義日曆上方顯示全天信息的文本	'all-day'
axisFormat	設置日曆agenda視圖下左側的時間顯示格式，默認顯示如：5:30pm	'h(:mm)tt'
slotMinutes	在agenda的視圖中, 兩個時間之間的間隔(分鐘)	30
defaultEventMinutes	事件默認的時間執行長度，若是事件對象沒有指定執行多長時間，則默認執行兩個小時	120
firstHour	當切換到agenda時，初始滾動條滾動到的時間位置，默認在6點鐘的位置	6
minTime	設置顯示的時間從幾點開始	0
maxTime	設置顯示的時間從幾天結束	24
slotEventOverlap	設置視圖中的事件顯示是否能夠重疊覆蓋	true

當前日期設置

屬性	描述	默認值
year	設置日曆年份，必須爲4位如：2013，若是不設置則默認爲當前年份
month	設置初始化日曆的月份，從0開始，若是年份和月份都未指定，則從一月開始。
date	設置日曆初始化時的日期，只有在周視圖和日視圖中有效
prev	method，進入到上一月（周、天）視圖 $('#calendar').fullCalendar('prev');
next	method，進入到下一月（周、天）視圖 $('#calendar').fullCalendar('next');
prevYear	method，進入上一年視圖
nextYear	method，進入下一年視圖
today	method，進入當天
gotoDate	method，指定進入日曆中的某一天 $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] )
incrementDate	method， 以當前時間爲軸, 將日曆向前, 或向後移動指定長度的時間, 好比: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示將日曆年份向前移動3年, 月份向後移動2月, day(天數)向前移動5天。
getDate	method，返回當前日曆中的日期

文本與時間定製

你能夠根據項目需求設置日曆顯示的文本信息，如中文的月份等。

屬性	描述	默認值
timeFormat	設置顯示的日程事件的時間格式，如timeFormat: 'H:mm' 則顯示24小時制的像10:30	{agenda: ‘h:mm{ - h:mm}}
columnFormat	設置顯示日曆每列表頭信息的格式文本，默認： { month: 'ddd', // Mon week: 'ddd M/d', // Mon 9/7 day: 'dddd M/d' // Monday 9/7 }	見描述
titleFormat	設置用於顯示日曆頭部的文本信息，默認： { month: 'MMMM yyyy', // September 2013 week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2013 day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013 }	見描述
buttonText	設置日曆頭部各按鈕的顯示文本信息，默認： { prev: '‹', // ‹ next: '›', // › prevYear: '«', // « nextYear: '»', // » today: 'today', month: 'month', week: 'week', day: 'day' }	見描述
monthNames	月份全稱，默認： ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']	見描述
monthNamesShort	月份名稱簡寫，默認：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	見描述
dayNames	星期全稱，默認：['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']	見描述
dayNamesShort	星期名稱簡寫，默認：['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	見描述
weekNumberTitle	周次，即一年中的第幾周	"W"

鼠標單擊和滑過

如下列出的是當鼠標單擊或者滑過日曆中的某個元素時，回調的函數callback。

屬性	描述
dayClick	當單擊日曆中的某一天時，觸發callback，用法： $('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { do something... } }); date是點擊的day的時間(若是在agenda view, 還包含時間)，在月view下點擊一天時，allDay是true，在agenda模式下，點擊all-day的窄條時，allDay是true，點擊其餘的agenda view下的day則爲false，jsEvent就是一個普通的javascript事件，包含的是click事件的基礎信息。
eventClick	當點擊日曆中的某一日程（事件）時，觸發此操做，用法： $('#calendar').fullCalendar({ dayClick: function(event, jsEvent, view) { do something... } }); event是日程（事件）對象，jsEvent是個javascript事件，view是當前視圖對象。
eventMouseover eventMouseout	鼠標劃過和離開的事件，用法和參數同上

選擇操做

屬性	描述	默認值
selectable	是否容許用戶經過單擊或拖動選擇日曆中的對象，包括天和時間。	false
selectHelper	當點擊或拖動選擇時間時，顯示默認加載的提示信息，該屬性只在周/天視圖裏可用。	false
unselectAuto	當點擊頁面日曆之外的位置時，是否自動取消當前的選中狀態。	true
unselectCancel	指定哪些元素不會清空當前的選中，以JQUERY選擇器的方式指定 '#someId'。	''
select	callback，被選中的函數回調，使用方法： function( startDate, endDate, allDay, jsEvent, view ) startDate：被選中區域的開始時間 endDate：被選中區域的結束時間 allDay：是否爲全天事件 startDate：jascript對象 startDate：當前視圖對象
unselect	callback，選中被取消時的回調，使用方法： function( view, jsEvent )
select	method，選中某個時間，使用方法： $('#calendar').fullCalendar( 'select', startDate, endDate, allDay )
unselect	method，取消選中，使用方法： $('#calendar').fullCalendar( 'unselect' )

日程事件數據

FullCalendar最重要的部分，設置用於日程事件相關信息。

Event Object，事件對象，用來存儲一個日曆事件信息的標準對象，只有title和start是必須的

屬性	描述
id	可選，事件惟一標識，重複的事件具備相同的id
title	必須，事件在日曆上顯示的title
allDay	可選，true or false，是不是全天事件。
start	必須，事件的開始時間。
end	可選，結束時間。
url	可選，當指定後，事件被點擊將打開對應url。
className	指定事件的樣式。
editable	事件是否可編輯，可編輯是指能夠移動, 改變大小等。
source	指向次event的eventsource對象。
color	背景和邊框顏色。
backgroundColor	背景顏色。
borderColor	邊框顏色。
textColor	文本顏色。

事件源對象

事件源即日曆中的數據來源，FullCalendar提供了數組、函數調用、以及JSON數據的形式，固然也能夠經過Google Calendar feed獲取數據接口。helloweba.net後面會有文章專門介紹事件數據的操做，包括數據的查詢、寫入、更新和刪除操做。

如下是Event事件相關的參數屬性說明。

屬性	描述	默認值
eventSources	事件源，存儲數組對象，能夠是Arrays/Functions/URLs。
allDayDefault	是否爲全天日程事件，顯示這一天中所作的事情。	true
ignoreTimezone	是否忽略時區。	true
startParam	在使用URL方式獲取events數據源的時候, 自動插入到URL中的參數, 表示當前須要抓取的日程事件的起始時間。	'start'
endParam	和startParam參數意義相同, 表示要抓取的日程事件的終止時間。	'end'
lazyFetching	是否從緩存信息獲取event。好比從月視圖切換到周視圖。	true
eventDataTransform	callback，將外部數據源轉換成Fullcalendar能夠處理的數據
loading	callback，日曆開始加載的時候，isLoading參數爲true觸發一次，日曆加載完畢，isLoading參數爲false觸發一次，用法： function(isLoading, view)
updateEvent	method，更新日曆空間中的一個日程事件，若是是重複的日程事件，則都更新。用法： $('#calendar').fullCalendar( 'updateEvent', event )
clientEvents	method，返回FullCalendar已經存儲到客戶端的CalEvents對象數組， 第二個參數和removeEvents方法的第二個參數意義相同， 只不過在過濾器中， 若是返回true， 則該CalEvent對象將被加入到返回的數組中。
removeEvents	method，從日曆中刪除一個日程事件. 第二個參數能夠不填， 能夠填id， 能夠是一個過濾器(一個函數， 接受CalEvent對象做爲參數)。用法： $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )
refetchEvents	method，從新抓取全部的日程事件源上的日程事件並渲染它們。
addEventSource	method，添加一個日程事件源，添加以後， FullCalendar會立刻從該源獲取日程事件， 並加載到日曆中。第二個參數和定義Calendar時候使用的url參數一致。
removeEventSource	method，移除一個日程事件源，該源上獲取獲得的日程時間也將被立刻從日曆中移除。

事件渲染

 

屬性	描述
eventColor eventBackgroundColor eventBorderColor eventTextColor	設置日程事件的背景色和邊框色，以及文本顏色。可使用任意支持css的顏色方式，如 #f00, #ff0000, rgb(255,0,0), or red。
eventRender	callback，當日程事件渲染時觸發，用法： function(calEvent, element, view)
eventAfterRender	callback，當日程事件被渲染後觸發，用法： function( event, element, view ) { }
eventDestroy	callback，當日程事件移出時觸發，用法： function( event, element, view ) { }
renderEvent	method，一旦日曆從新取得日程源，則原有日程將消失，當指定stick爲true時，日程將永久的保存到日曆上。
rerenderEvents	method，從新渲染全部事件。

日程事件拖動和縮放

拖動和縮放功能依賴於jQuery ui的draggable和resizable，因此在使用時要提早加載jQuery ui相關插件。

屬性	描述	默認值
editable	是否可編輯，即進行可拖動和縮放操做。	false
eventStartEditable	是否讓事件在開始時就能夠拖動。	true
dragRevertDuration	若是拖拽不成功，多久回覆原狀，毫秒	500
dragOpacity	拖動時候的不透明度。 { agenda:.5 //對於agenda試圖 '':1.0 //其餘視圖 }	見描述
eventDragStart, eventDragStop	callback，日程事件被拖動以前和以後觸發。這裏的拖動不必定是一個有效的拖動，只要日程事件的控件被拖着動了，事件就觸發。 能夠從該對象中獲取位移，位置等數據。用法： function( event, jsEvent, ui, view ) { }
eventDrop	callback，當拖拽完成而且時間改變時觸發，用法： function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { } ayDelta 保存日程向前或者向後移動了多少天 minuteDelta 這個值只有在agenda視圖有效，移動的時間 allDay 若是是月視圖，或者是agenda視圖的全天日程，此值爲true,不然爲false
eventResizeStart, eventResizeStop	callback，在一個日程事件改變大小以前以後發生(不必定要改變成功)，用法： function( event, jsEvent, ui, view ) { }
eventResize	callback，在日程事件改變大小併成功後調用, 參數和eventDrop參數用法一致。用法： function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }

日期工具

函數	描述
formatDate	格式化日期，經過指定的格式格式化一個日期，返回一個字符串。options選項是一個對象，其中設置本地化變量支持的屬性值. 好比{ monthNames : ['一月'，'二月'，……]，dayNames: ['週日'，'週一'，…..]}，用法： $.fullCalendar.formatDate( date，formatString [,options ] )
formatDates	一次格式化兩個日期，和上一個格式化日期相似，只不過，這裏在formatString中使用大括號{…}來描述第二個日期的格式化方式。用法： $.fullCalendar.formatDates( date1，date2，formatString [,options ] )
parseDate	解析日期，將一個字符串格式成一個javascript的Date對象，這個string能夠是ISO8601，IETF，UNIX時間戳三種格式。用法: $.fullCalendar.parseDate( string )
parseISO8601	將一個ISO8601字符串轉換成一個javascript 的Date對象。用法： $.fullCalendar.parseISO8601( string [,ignoreTimezone ] )

參考文獻：