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](https://www.helloweba.net/javascript/454.html#fc-EventSourceObject)事件源 | | 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](https://www.helloweba.net/javascript/454.html#). | | 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://www.helloweba.net/javascript/454.html#fc-EventSourceObject)。 官方英文文檔：[https://fullcalendar.io/docs/event\_data/events\_json\_feed/](https://fullcalendar.io/docs/event_data/events_json_feed/) #### events (as a function) 自定義函數返回?[Event Objects](https://www.helloweba.net/javascript/fc-EventObject) ~~~ 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](https://www.helloweba.net/javascript/454.html#fc-EventSourceObject)。 #### eventSources eventSources 是一種指定多個數據源的途徑，值為數組類型。eventSources 是?`events`選項的一種替代。 在eventSources里可以是[數組數據](https://www.helloweba.net/javascript/454.html#fc-eventsArray)、[JSON數據](https://www.helloweba.net/javascript/454.html#fc-eventsjson)、[函數數據](https://www.helloweba.net/javascript/454.html#fc-eventsFunction)、[數據源對象(Event Source Object)](https://www.helloweba.net/javascript/454.html#fc-EventSourceObject) ~~~ $('#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](https://www.helloweba.net/javascript/454.html#fc-EventObject)。 ~~~ function( eventData ) {} ~~~ 該鉤子函數（hook）允許您從JSON提要或其他事件源接收任意事件數據，并將其轉換為FullCalendar接受的數據類型。 這讓您輕松接受替代數據格式，而無需編寫完全自定義的事件功能。 #### loading 回調函數，當獲取數據開始和結束的時候觸發： ~~~ function( isLoading, view ) ~~~ AJAX開始獲取數據的時候 isLoading 是true，結束的時候是false。view是當前的 View Object。此函數常常用來顯示或隱藏加載圖標。 #### updateEvent 方法，當更新事件時將事件渲染在日歷上。 ~~~ .fullCalendar( 'updateEvent', event ) ~~~ `event`必須是日程的原生[Event Object](https://www.helloweba.net/javascript/454.html#fc-EventObject)，可以通過?[eventClick](https://www.helloweba.net/javascript/452.html#fc-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](https://www.helloweba.net/javascript/454.html#fc-EventSourceObject))，返回數組。 ~~~ .fullCalendar( 'getEventSources' ) ~~~ #### getEventSourceById 方法，根據給定的時間id，檢索獲取事件源對象([Event Source Object](https://www.helloweba.net/javascript/454.html#fc-EventSourceObject)) ~~~ .fullCalendar( 'getEventSourceById', id ) ~~~