FullCalendar日历插件说明文档
作者:Alpha时间:2017-09-14 阅读数:3732 +人阅读
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档,以供参阅。当前版本1.6.4。
普通显示设置
属性 | 描述 | 默认值 |
header | 设置日历头部信息。 如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: title: 显示当前月份/周/日信息 prev: 用于切换到上一月/周/日视图的按钮 next: 用于切换到下一月/周/日视图的按钮 prevYear:用于切换到上一年视图的按钮 nextYear:用于切换到下一年视图的按钮 |
{ left: 'title', center: '', right: 'today prev,next' } |
theme | 是否允许使用jquery的ui主题,如果设置为true,则需要加载jquery ui相关css和js文件。 查看演示 | false |
buttonIcons | 设置header中使用的prev, next等变量对应按钮的样式,只有当theme为true时才有效,如果你调用了jQuery ui样式但又不想使用它的图标样式,可以将此属性设置为false | { prev: 'circle-triangle-w', next: 'circle-triangle-e' } |
firstDay | 设置一周中显示的第一天是哪天,周日是0,周一是1,类推。 | 0 |
isRTL | 设置为ture时则日历从右往左显示,貌似是针对阿拉伯人设计的。 | false |
weekends | 是否显示周末,设为false则不显示周六和周日。 | true |
hiddenDays | 隐藏一周中的某一天或某几天,数组形式,如隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。 | [] |
weekMode | 在月视图里显示周的模式,因为每月周数可能不同,所以月视图高度不一定。 fixed:固定显示6周高,日历高度保持不变 liquid:不固定周数,高度随周数变化 variable:不固定周数,但高度固定 |
'fixed' |
weekNumbers | 是否在日历中显示周次(一年中的第几周),如果设置为true,则会在月视图的左侧、周视图和日视图的左上角显示周数。 | false |
weekNumberCalculation | 周次的显示格式。 | "iso" |
height | 设置日历的高度,包括header日历头部,默认未设置,高度根据aspectRatio值自适应。 | |
contentHeight | 设置日历主体内容的高度,不包括header部分,默认未设置,高度根据aspectRatio值自适应。 | |
aspectRatio | 设置日历单元格宽度与高度的比例。 | 1.35 |
handleWindowResize | 是否随浏览器窗口大小变化而自动变化。 | true |
windowResize | callback,当浏览器窗口变化时触发function,使用: $('#calendar').fullCalendar({ windowResize: function(view) { alert('The calendar has adjusted to a window resize'); } }); |
|
render | method,绑定日历到id上。 $('#id').fullCalendar('render'); |
|
destroy | method,销毁id日历,把日历回复到初始化前状态。 $('#id').fullCalendar('destroy'); |
视图
FullCalendar提供五种可用视图,包括month(月视图),basicWeek(基本周视图,左侧不显示具体时间),basicDay(基本日视图,左侧不显示具体时间),agendaWeek(周视图),agendaDay(日视图)。
View视图对象的属性:
属性 | 描述 |
name | 包括month,basicWeek,basicDay,agendaWeek,agendaDay |
title | 标题内容(例如"2013年9月" or "Sep 7 - 13 2013") |
start | Date类型, 该view下的第一天 |
end | Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天 |
visStart | Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致 |
visEnd | Date类型, 最后一个可访问的day |
View其他属性和方法
属性 | 描述 | 默认值 |
defaultView | 日历初始化时默认视图 | 'month' |
getView | method,取得视图对象信息,如获取当前视图的标题内容: var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title); |
|
changeView | method,切换视图 .fullCalendar('changeView',viewName) viewName为5种视图中的一种 |
日程选项
以下选项设置适用于agendaWeek和agendaDay视图里。
属性 | 描述 | 默认值 |
allDaySlot | 在agenda视图模式下,是否在日历上方显示all-day(全天) | true |
allDayText | 定义日历上方显示全天信息的文本 | 'all-day' |
axisFormat | 设置日历agenda视图下左侧的时间显示格式,默认显示如:5:30pm | 'h(:mm)tt' |
slotMinutes | 在agenda的视图中, 两个时间之间的间隔(分钟) | 30 |
defaultEventMinutes | 事件默认的时间执行长度,如果事件对象没有指定执行多长时间,则默认执行两个小时 | 120 |
firstHour | 当切换到agenda时,初始滚动条滚动到的时间位置,默认在6点钟的位置 | 6 |
minTime | 设置显示的时间从几点开始 | 0 |
maxTime | 设置显示的时间从几天结束 | 24 |
slotEventOverlap | 设置视图中的事件显示是否可以重叠覆盖 | true |
当前日期设置
属性 | 描述 | 默认值 |
year | 设置日历年份,必须为4位如:2013,如果不设置则默认为当前年份 | |
month | 设置初始化日历的月份,从0开始,如果年份和月份都未指定,则从一月开始。 | |
date | 设置日历初始化时的日期,只有在周视图和日视图中有效 | |
prev | method,进入到上一月(周、天)视图 $('#calendar').fullCalendar('prev'); |
|
next | method,进入到下一月(周、天)视图 $('#calendar').fullCalendar('next'); |
|
prevYear | method,进入上一年视图 | |
nextYear | method,进入下一年视图 | |
today | method,进入当天 | |
gotoDate | method,指定进入日历中的某一天 $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] ) |
|
incrementDate | method, 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数)向前移动5天。 | |
getDate | method,返回当前日历中的日期 |
文本与时间定制
View视图对象的属性:
属性 | 描述 |
name | 包括month,basicWeek,basicDay,agendaWeek,agendaDay |
title | 标题内容(例如"2013年9月" or "Sep 7 - 13 2013") |
start | Date类型, 该view下的第一天 |
end | Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天 |
visStart | Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致 |
visEnd | Date类型, 最后一个可访问的day |
View其他属性和方法
属性 | 描述 | 默认值 |
defaultView | 日历初始化时默认视图 | 'month' |
getView | method,取得视图对象信息,如获取当前视图的标题内容: var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title); |
|
changeView | method,切换视图 .fullCalendar('changeView',viewName) viewName为5种视图中的一种 |
日程选项
以下选项设置适用于agendaWeek和agendaDay视图里。
属性 | 描述 | 默认值 |
allDaySlot | 在agenda视图模式下,是否在日历上方显示all-day(全天) | true |
allDayText | 定义日历上方显示全天信息的文本 | 'all-day' |
axisFormat | 设置日历agenda视图下左侧的时间显示格式,默认显示如:5:30pm | 'h(:mm)tt' |
slotMinutes | 在agenda的视图中, 两个时间之间的间隔(分钟) | 30 |
defaultEventMinutes | 事件默认的时间执行长度,如果事件对象没有指定执行多长时间,则默认执行两个小时 | 120 |
firstHour | 当切换到agenda时,初始滚动条滚动到的时间位置,默认在6点钟的位置 | 6 |
minTime | 设置显示的时间从几点开始 | 0 |
maxTime | 设置显示的时间从几天结束 | 24 |
slotEventOverlap | 设置视图中的事件显示是否可以重叠覆盖 | true |
当前日期设置
属性 | 描述 | 默认值 |
year | 设置日历年份,必须为4位如:2013,如果不设置则默认为当前年份 | |
month | 设置初始化日历的月份,从0开始,如果年份和月份都未指定,则从一月开始。 | |
date | 设置日历初始化时的日期,只有在周视图和日视图中有效 | |
prev | method,进入到上一月(周、天)视图 $('#calendar').fullCalendar('prev'); |
|
next | method,进入到下一月(周、天)视图 $('#calendar').fullCalendar('next'); |
|
prevYear | method,进入上一年视图 | |
nextYear | method,进入下一年视图 | |
today | method,进入当天 | |
gotoDate | method,指定进入日历中的某一天 $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] ) |
|
incrementDate | method, 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数)向前移动5天。 | |
getDate | method,返回当前日历中的日期 |
文本与时间定制
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:595397166@qq.com