FullCalendar中文文檔：Event日程事件

FullCalendar用作日程安排，其日程中的事件是日歷中的主體內容。FullCalendar提供了很多日程事件的屬性設置、方法調用以及回調函數，方便開發者快速掌握FullCalendar。

Event Object

Event Object 是一個 js 對象，存儲日歷表的日程事件信息，支持以下屬性：

屬性	說明
id	string 或者 int 類型，事件的唯一標識。重復事件的不同實例應該都具有相同的ID。
title	String，必選，事件名稱。
allDay	布爾型，`true`或`false`，可選項。事件是否發生在特定的時間。該屬性影響是否顯示事件的時間。此外，在議程視圖中，確定是否顯示在“全天”部分。
start	事件開始日期/時間，必選。格式為ISO8601字符串或UNIX時間戳
end	事件結束日期/時間，可選。格式為ISO8601字符串或UNIX時間戳
url	事件鏈接地址，字符串，可選。當單擊事件的時候會跳轉到對應的url。
className	string 或者 Array 類型，可選。一個css類（或者一組），附加到事件的 DOM 元素上。
editable	`true`或`false`，可選。只針對當前的單個事件，其他事件不受影響。
startEditable	`true`或`false`，可選。覆蓋當前事件的`eventStartEditable`選項
durationEditable	`true`或`false`，可選。覆蓋當前事件的`eventDurationEditable`選項
resourceEditable	`true`或`false`，可選。覆蓋當前事件的 `eventResourceEditable`選項
rendering	允許渲染事件，如背景色等。可以為空，也可以是`"background"`, or`"inverse-background"`
overlap	`true`或`false`，可選。覆蓋當前事件的`eventOverlap`選項。如果設置為`false`，則阻止此事件被拖動/調整為其他事件。還可以防止其他事件在此事件中被拖動/調整大小。
constraint	事件id，"businessHours"，對象，可選。覆蓋當前事件的`eventConstraint`選項。
source	Event Source Object事件源
color	和 eventColor 作用一樣，設置事件的背景色和邊框。
backgroundColor	和 eventBackgroundColor 作用一樣，設置事件的背景色。
borderColor	和 eventBorderColor 作用一樣，設置事件的邊框。
textColor	和 eventTextColor 作用一樣，設置事件的文字顏色

除上述屬性外，你還可以自定義非標准的屬性字段，FullCalendar不會修改或刪除這些字段。

Event Source Object

"event source"是Fullcalendar的事件數據源events，可以是你定義的一個數組，一個函數，一個返回json的接口，或者google calendar。

數組類型：

{
    events: [ { title: 'Event1', start: '2011-04-04' }, { title: 'Event2', start: '2011-05-05' } // etc... ], color: 'yellow', // an option! textColor: 'black' // an option! }

函數：

{
    events: function(start, end, timezone, callback) { // ... }, color: 'yellow', // an option! textColor: 'black' // an option! }

json數據：

{
    url: '/myfeed.php', color: 'yellow', // an option! textColor: 'black' // an option! }

Google日歷咱就不說了。

Events事件源提供了很多屬性可以設置：

屬性	說明
id	當前事件源的id。可選，見getEventSourceById.
color	設置事件對象的color（顏色）屬性。
backgroundColor	設置事件對象的backgroundColor（背景色）屬性。
borderColor	設置事件對象的borderColor（邊框色）屬性。
textColor	設置事件對象的textColor（文本色）屬性。
className	設置事件對象的className（class類名）屬性。
editable	設置事件對象的editable（可編輯）屬性。
startEditable	設置事件對象的startEditable屬性。
durationEditable	設置事件對象的durationEditable屬性。
backgroundColor	設置事件對象的resourceEditable屬性。
rendering	設置事件對象的rendering屬性。
overlap	設置事件對象的overlap屬性。
constraint	設置事件對象的constraint屬性。
allDayDefault	設置allDayDefault選項，僅限當前事件源。
eventDataTransform	設置eventDataTransform回調，僅限當前事件源。

events (as an array)

數組類型的事件數據源。事件數據以數組的形式給FullCalendar調用。

$('#calendar').fullCalendar({ events: [ { title : 'event1', start : '2017-11-01' }, { title : 'event2', start : '2017-11-05', end : '2017-11-07' }, { title : 'event3', start : '2017-11-09T12:30:00', allDay : false // will make the time show } ] });

請確保最后一個事件后不能有逗號，否則IE會出錯。

你也可以使用eventSources屬性設置多個數據源。

$('#calendar').fullCalendar({ eventSources: [ // your event source { events: [ // put the array in the `events` property { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', } ], color: 'black', // an option! textColor: 'yellow' // an option! } // any other event sources... ] });

events (as a json feed)

返回json格式數據的接口，每當FullCalendar需要的數據的時候就會訪問這個地址（例如用戶在當前視圖前進或者后退，或者切換視圖），FullCalendar會判斷需要的時間段，並且把這個時間放在get請求參數中。參數的命名由 startParam 和 endParam 選項決定（默認 start 和 end），參數的值采用ISO8601格式如：2013-12-01。

$('#calendar').fullCalendar({ events: '/myfeed.php' });

以上代碼執行后，Fullcalendar會訪問URL：

/myfeed.php?start=2013-12-01&end=2014-01-12&_=1386054751381

最后一個參數是為了防止瀏覽器緩存，也可以在events中設置cache參數來決定是否緩存。

$('#calendar').fullCalendar({ events: { url: '/myfeed.php', cache: true } });

最終myfeed.php返回的應該是json格式的數據。如果涉及到跨域的請求，可以使用JSONP。

看一下是不是像jQuery的$.ajax方法：

$('#calendar').fullCalendar({ 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 } });

多個事件源可以使用eventSources。

官方英文文檔：https://fullcalendar.io/docs/event_data/events_json_feed/

events (as a function)

自定義函數返回 Event Objects

function( start, end, timezone, callback ) { }

FullCalendar 會在需要數據的時候調用這個自定義函數，例如當用戶切換視圖的時候。

此函數會傳入 start 和 end參數（Date對象）來表示時間范圍。timezone是指Fullcalendar當前使用的時區。另外還有 callback 函數，當自定義函數生成日程之后必須調用，callback的入參是 Event Objects 數組。

以下代碼告訴我們如何使用事件函數加載XML格式的數據。

$('#calendar').fullCalendar({ events: function(start, end, timezone, callback) { $.ajax({ url: 'myxmlfeed.php', dataType: 'xml', data: { // our hypothetical feed requires UNIX timestamps start: start.unix(), end: end.unix() }, success: function(doc) { var events = []; $(doc).find('event').each(function() { events.push({ title: $(this).attr('title'), start: $(this).attr('start') // will be parsed }); }); callback(events); } }); } });

多個事件源可以使用eventSources。

eventSources

eventSources 是一種指定多個數據源的途徑，值為數組類型。eventSources 是 events選項的一種替代。

在eventSources里可以是數組數據、JSON數據、函數數據、數據源對象(Event Source Object)

$('#calendar').fullCalendar({ eventSources: [ '/feed1.php', '/feed2.php' ] });

allDayDefault

allDayDefault 決定了在 Event Object 的 allday屬性未指定時的默認值。allDayDefault 值為布爾類型，默認true。

startParam

使用json接口的時候，定義開始時間（ISO8601時間字符串）的屬性名。值為字符串類型的，默認為'start'。

endParam

使用json接口的時候，定義結束時間（ISO8601時間字符串）的屬性名。值為字符串類型的，默認為'end'。

timezoneParam

使用json接口的時候，定義時區。值為字符串類型的，默認為'timezone'。

lazyFetching

是否延遲加載數據，值為布爾類型，默認值為true。

當定義為true的時候，FullCalendar 只有在真正需要的時候才去加載數據。例如，當你的日程表現在在月視圖的二月，FullCalendar 會取整個二月的數據，在內部緩存起來，當用戶切換到二月的周視圖或者天視圖的時候，FullCalendar 會自動從緩存中取得需要的數據。

當設置為false的時候，每次切換 FullCalendar 都會重新加載數據（不使用緩存）。

defaultTimedEventDuration

當沒有設置事件的結束時間end時指定事件的持續時間，默認'02:00:00'即2小時。

defaultAllDayEventDuration

當事件為全天事件而沒有設置結束end時間時指定事件的持續時間。默認是{ days: 1 }。

forceEventDuration

如果未指定事件end結束時間，是否強制使用結束時間。默認false。

eventDataTransform

回調函數，將自定義數據轉換為標准的事件對象Event Object。

function( eventData ) {}

該鈎子函數（hook）允許您從JSON提要或其他事件源接收任意事件數據，並將其轉換為FullCalendar接受的數據類型。這讓您輕松接受替代數據格式，而無需編寫完全自定義的事件功能。

loading

回調函數，當獲取數據開始和結束的時候觸發：

function( isLoading, view )

AJAX開始獲取數據的時候 isLoading 是true，結束的時候是false。view是當前的 View Object。此函數常常用來顯示或隱藏加載圖標。

updateEvent

方法，當更新事件時將事件渲染在日歷上。

.fullCalendar( 'updateEvent', event )

event必須是日程的原生Event Object，可以通過 eventClick 回調或者 clientEvents 方法獲得：

$('#calendar').fullCalendar({ eventClick: function(event, element) { event.title = "CLICKED!"; $('#calendar').fullCalendar('updateEvent', event); } });

updateEvents

方法，當要更新多個事件並且渲染到日歷時使用。

.fullCalendar( 'updateEvents', events )

clientEvents

方法，從FullCalendar 的緩存的數據中取得日歷事件。

.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

此方法會從客戶端緩存中獲取 Event Objects 數組。

如果忽略idOrFilter參數的話，會取得全部數據。如果idOrFilter 是ID的話，會返回該ID的所有日程。idOrFilter 也可以是一個篩選函數，接受 Event Object 參數，返回布爾類型參數。

removeEvents

方法，刪除Fullcalendar中的事件。

.fullCalendar( 'removeEvents' [, idOrFilter ] )

如果忽略idOrFilter參數的話，刪除所有日程。如果 idOrFilter是ID的話，會刪除該ID的所有日程。idOrFilter 也可以是一個篩選函數，接受 Event Object 參數，返回布爾類型參數（如果是true的話就刪除）。

refetchEvents

方法，從各個數據源重新獲取並且渲染數據。

.fullCalendar( 'refetchEvents' )

refetchEventSources

方法，重新獲取一個或多個數據源。

.fullCalendar( 'refetchEventSources', sources )

sources可以是單個事件id或者多個事件數組。

addEventSource

方法，動態的添加一個數據源。

.fullCalendar( 'addEventSource', source )

數據源可以是一個數組，函數或者json接口。FullCalendar 會立刻從這個數據源獲取日程並且渲染。

removeEventSource

方法，動態刪除一個數據源。

.fullCalendar( 'removeEventSource', source )

該數據源的事件會立刻從日歷中移除。

removeEventSources

方法，動態刪除所有事件源或多個指定的事件源。

.fullCalendar( 'removeEventSources', optionalSourcesArray )

當optionalSourcesArray未指定，將刪除所有的事件源。

getEventSources

方法，獲取所有的事件源對象(Event Source Object)，返回數組。

.fullCalendar( 'getEventSources' )

getEventSourceById

方法，根據給定的時間id，檢索獲取事件源對象(Event Source Object)

.fullCalendar( 'getEventSourceById', id )