FullCalendar提供丰富的参数和事件回调函数的设置,方便开发者进行日程的快速开发。FullCalendar支持对日程事件进行渲染输出,支持对事件的拖放。
Coloring Events
你可以使用eventColor设置日程事件的颜色,例如:
$('#calendar').fullCalendar({
events: [
// my event data
],
eventColor: '#378006'
});
知识兔eventBackgroundColor,eventBorderColor,和 eventTextColor属性同样用来设置日程的颜色。如果要为特定的数据源设置颜色,参考 Event Source options。
Background Events
设置日程事件中的高亮背景色,可以参照Event Object中的rendering
属性设置值为:"background"
。
$('#calendar').fullCalendar({
defaultDate: '2014-11-10',
defaultView: 'agendaWeek',
events: [
{
start: '2014-11-10T10:00:00',
end: '2014-11-10T16:00:00',
rendering: 'background'
}
]
});
知识兔eventColor
设置所有日程事件的背景色和边框颜色,值为字符串类型。
你可以使用任何css的颜色格式,例如#f00
,#ff0000
,rgb(255,0,0)
或者red
。
此设置可以被每个数据源(Event Source Object)的color属性和每个日程(Event Object)的color属性覆盖。
eventBackgroundColor
设置日程事件的背景色,值为字符串类型。
你可以使用任何css的颜色格式,例如#f00
,#ff0000
,rgb(255,0,0)
或者red
。
此设置可以被每个数据源(Event Source Object)的backgroundColor属性和每个日程(Event Object)的backgroundColor属性覆盖。
eventBorderColor
设置日程事件的边框颜色,值为字符串类型。
你可以使用任何css的颜色格式,例如#f00
,#ff0000
,rgb(255,0,0)
或者red
。
此设置可以被每个数据源(Event Source Object)的 borderColor 属性和每个日程(Event Object)的 borderColor 属性覆盖。
eventTextColor
设置日程事件的文字颜色,值为字符串类型。使用方法同上。
nextDayThreshold
当一个事件的结束时间跨越到第二天的时间时,就像一天中的时间呈现最短的持续时间。默认:“09:00:00”(上午9点)
eventOrder
确定具有相同日期/时间的的垂直排序方式。
String / Array / Function, default: "title"
知识兔默认情况下,FullCalendar决定具有较长持续时间和较早开始时间的事件被排序在其他事件之上。 但是,事件往往具有相同的确切的开始时间和持续时间,对于全天事件尤其如此。 默认情况下,当发生这种情况时,事件按标题按字母顺序排序。 eventOrder提供了覆盖此行为的功能。
eventRenderWait
在渲染事件之前,操作后等待的毫秒数。整型,默认关闭。
当此值指定为毫秒数值时,日历将在任何可能导致事件重新渲染的操作(例如renderEvent和updateEvent)之后开始等待。 在这段时间过后,日历将一起呈现所有事件。 由于性能的原因,这会减少重新使用的次数。
eventRender
回调函数,当日程事件被渲染的时候触发:
function( event, element, view ) { }
知识兔event
是被渲染的Event Object。
element
是被创建的jquery <div>对象,用来渲染日程。标题和时间已经被填充进去。
eventRender
函数可以修改 element 元素,返回一个新的DOM元素插入到日程表中。或者返回false,阻止该日程的插入。
eventRender
可以用来附加jquery 插件到dom元素上,例如 gTip 插件:
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
});
知识兔eventAfterRender
回调函数,当日程事件被渲染到日程表后触发:
function( event, element, view ) { }
知识兔eventAfterAllRender
回调函数,当所有事件完成渲染后触发:
function( view ) { }
知识兔eventDestroy
回调函数,当事件元素从DOM中删除之前触发:
function( event, element, view ) { }
知识兔event
是 Event Object 对象。
element
是要被移除的 jQuery 对象。
renderEvent
方法,渲染一个新的日程事件到日程表上:
.fullCalendar( 'renderEvent', event [, stick ] )
知识兔event
是 Event Object 对象,至少含有 title 和 start 属性。
通常,用 renderEvent 方法添加的日程会在日程表重载数据(refetches)之后消失。可以将stick设置为true
renderEvents
方法,批量渲染新的事件到日程表上。方法同上,只是多个事件以数组的形式呈现。
.fullCalendar( 'renderEvents', events [, stick ] )
知识兔rerenderEvents
重新渲染所有事件到日程表中。
.fullCalendar( 'rerenderEvents' )
知识兔Touch Support
自2.7.0版以来,FullCalendar改进了对触摸设备的支持。 Scheduler v1.3.0及更高版本中也提供触摸支持。 触摸支持包括:
平滑滚动
通过longPressDelay进行时间范围选择
事件通过longPressDelay进行拖放/调整大小
为了让最终用户开始拖放事件,他们必须先点击并按住事件才能“选择”它!
editable
是否允许事件可以被编辑,值为布尔类型,默认值为false
。editable 决定了日程是否可以被调整和拖拽,这个过程会同时调整开始和结束时间。如果想单独设置是否可以拖拽和调整,可以使用eventStartEditable和 eventDurationEditable代替。
eventStartEditable
是否允许通过拖拽调整日程的开始时间,值为布尔类型,默认值为true
。此设置可以覆盖数据源(Event Source Object)的 startEditable 属性和单个日程(Event Object)的 startEditable 属性。
eventDurationEditable
是否允许通过resize调整日程的结束时间,值为布尔类型,默认值为true
。此设置可以覆盖数据源(Event Source Object)的 durationEditable 属性和单个日程(Event Object)的 durationEditable 属性。
dragRevertDuration
当拖动事件失败后,恢复到原来的位置所需时间,默认500ms。
dragOpacity
当事件被拖动时呈现的透明度,浮点型,默认0.75。取值范围0.0~1.0。
dragScroll
是否在事件拖放或选择时自动移动滚动容器。布尔值,默认值:true
如果启用,一旦鼠标靠近边缘,滚动容器将自动滚动。
eventOverlap
当拖动或缩放时,是否允许日历中的时间相互重叠。默认:true
。如果为false
则不允许重叠。
eventConstraint
限制事件拖动和调整到特定的时间窗口。
一个事件ID,“businessHours”,对象如果给出了一个事件ID(很可能是一个字符串),那么正在被拖动或调整大小的事件必须由至少一个由给定事件ID链接的事件完全包含。
如果提供"businessHours"
,则被拖动或调整大小的事件必须在本周的营业时间内(默认情况下,周一至周五上午9点至下午5点)完全包含。
eventAllow
事件拖放精准控制。该函数要返回true
或者false
。
function(dropInfo, draggedEvent)
知识兔longPressDelay
对于触摸设备,需要按下事件多长时间才可以拖动事件或变为可选状态。默认:1000(1s)。
eventLongPressDelay
对于触摸设备,用户在事件变得可拖动之前最多按下的时间。默认:1000(1s)。
eventDragStart
回调函数,当事件开始拖动时触发:
function( event, jsEvent, ui, view ) { }
知识兔event
是 Event Object 对象,包含当前日程的信息(时间,标题等)
jsEvent
是原生的js对象,包含鼠标点击坐标等信息。
ui
空对象,在2.1版本前是 jQuery UI 对象。
view
是当前的 View Object。
eventDragStop
回调函数,当事件拖动停止后触发:
function( event, jsEvent, ui, view ) { }
知识兔这个回调被保证在用户拖动一个事件之后被触发,即使这个事件不改变日期/时间。 在事件信息被修改(如果移动到新的日期/时间)之前,触发eventDrop回调之前触发。
参数说明同上。
eventDrop
回调函数,当拖动结束且日程移动另一个时间时触发:
function( event, delta, revertFunc, jsEvent, ui, view ) { }
知识兔event
是 Event Object 对象,包含当前日程的信息(时间,标题等)
delta
表示事件被移动的时间量
revertFunc
是一个函数,如果被调用的话,日程会恢复到拖拽前的时间(就是被还原),当ajax失败的时候比较有用。
jsEvent
是原生的js对象,包含鼠标点击坐标等信息。
ui
是 jQuery UI 对象。
view
是当前的 View Object。
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventDrop: function(event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format());
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
});
知识兔eventResizeStart
回调函数,当日程事件调整(resize)开始时触发:
function( event, jsEvent, ui, view ) { }
知识兔event
是 Event Object 对象,包含当前日程的信息(时间,标题等)
jsEvent
是原生的js对象,包含鼠标点击坐标等信息。
ui
空对象,在2.1版本前是 jQuery UI 对象。
view
是当前的 View Object。
eventResizeStop
回调函数,当日程事件调整(resize)结束的时候触发:
function( event, jsEvent, ui, view ) { }
知识兔用户调整日程之后肯定会触发此回调函数,即使日程没有发生变化。eventResizeStop 在日程信息修改之前触发,并且早于 eventResize 回调。
参数说明同上。
eventResize
回调函数,当日程事件调整(resize)结束并且事件被改变时触发:
function( event, delta, revertFunc, jsEvent, ui, view ) { }
知识兔event
是 Event Object 对象,包含当前日程的信息(时间,标题等)
delta
表示事件被移动的时间量
revertFunc
是一个函数,如果被调用的话,日程会恢复到拖拽前的时间(就是被还原),当ajax失败的时候比较有用。
jsEvent
是原生的js对象,包含鼠标点击坐标等信息。
ui
空对象,在2.1版本前是 jQuery UI 对象。
view
是当前的 View Object。
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventResize: function(event, delta, revertFunc) {
alert(event.title + " end is now " + event.end.format());
if (!confirm("is this okay?")) {
revertFunc();
}
}
});
知识兔