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 )
知识兔