FullCalendar中文文档：Event日程事件 · php开发笔记

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 ) ~~~