Fullcalendar提供月/周/日等基本视图,还有列表视图、自定义视图等多种视图,提供了视图间的交互API,丰富了日历的展现形式,使用也非常简单。
Available Views 可用视图
FullCalendar有多种不同的视图,用来显示日期和事件,包括以下9种视图:
month
:月视图
basicWeek
:基础周视图
basicDay
:基础天视图
agendaWeek
:议程周视图
agendaDay
:议程天视图
listYear
:年份列表
listMonth
:月份列表
listWeek
:周列表
listDay
:天列表
高级日程表中还可以包含以下视图:
timelineDay
timelineWeek
timelineMonth
timelineYear
你可以定义header的按钮让用户可以切换视图,可以使用defaultView设置初始的视图。
Custom Views 自定义视图
除了直接使用可用的视图之外还可以自定义视图。
如果您想要使用其中一种现有的视图类型,例如“basic”或“agenda”,但以自定义区间显示,例如4天而不是1周或1天,请执行类似操作:
$('#calendar').fullCalendar({
header: {
center: 'month,agendaFourDay' // buttons for switching between views
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
}
}
});
知识兔以上代码中,自定义了一个视图叫agendaFourDay
,类型定义为agenda,设置时间范围为4天,视图切换的按钮文字显示“4 day”。查看demo
对于高级开发人员,fullcalendar提供与JavaScript代码的灵活性定制视图API。采用面向对象的编程原则,提供可以继承基类View,实现或重写每一个具体的行为作为一种方法,然后注册新的fullcalendar类。
Generic Views 通用视图
通用视图类似于自定义视图,你可以完全控制显示日期范围,而且定义非常简单。当你需要自定义日期范围显示视图时可以使用通用视图:
$('#calendar').fullCalendar({
defaultView: 'timeline', // or 'agenda' or 'basic'
duration: { days: 3 }
// can also specify:
// - visibleRange
// - dayCount
});
知识兔View-Specific Options 视图特定选项
如果要指定仅适用于特定视图的选项,请在视图选项中以视图名称为依据,指定单独的选项对象。
$('#calendar').fullCalendar({
header: { center: 'month,agendaWeek' }, // buttons for switching between views
views: {
month: { // name of view
titleFormat: 'YYYY, MM, DD'
// other view-specific options here
}
}
});
知识兔同样的方式也适用于其他视图。查看demo
View Object 视图对象
View Object包含当前视图(View)的信息,传递给回调函数。由以下属性构成:
name
:当前视图的名称,Available Views中的一个,字符串类型
title
:头部显示的文字(例如”September 2009″ 或者 ”Sep 7 – 13 2009″)
start
:Date对象,月/周视图的第一天或者天视图所表示的那一天
end
:Date对象,月/周视图的最后一天的下一天或者天视图所表示的那一天的下一天,例如2009年10月的月视图,end是11月1日
intervalStart
:时间间隔的开始的某一时刻,在月视图中,这将是本月的开始。
intervalEnd
:时间间隔结束时间,在月视图中,这将是最后一天。
defaultView - 默认视图
当日历初始加载时的默认视图。默认值是month
,它可以是可用视图中的任意值。
getView
返回当前视图的View Object。
.fullCalendar( 'getView' )
知识兔如果你想获取当前视图的Title或者start,end属性时可以使用,例如:
var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title);
知识兔changeView
切换到另一个视图。
.fullCalendar( 'changeView', viewName, dateOrRange )
知识兔viewName
必须是Available Views中的视图名字符串。
$('#calendar').fullCalendar('changeView', 'agendaDay');
知识兔如果要同时切换到新视图导航到新日期,则可以指定日期参数:
$('#calendar').fullCalendar('changeView', 'agendaDay', '2017-06-01');
知识兔如果你使用Generic Views, 你可以同样改变visibleRange:
$('#calendar').fullCalendar('changeView', 'agendaDay', {
start: '2017-06-01',
end: '2017-06-08'
});
知识兔What is List View?
列表视图是一种在平面列表中显示事件的可用视图。 只显示事件的几天。
列表视图在特定时间间隔内显示事件。 有4个预设列表视图:listDay,listWeek,listMonth和listYear。 如果您想要不同的时间间隔,您可以使用“list”类型创建自定义视图。
如果在特定时间间隔内没有事件,则显示noEventsMessage。
listDayFormat
设置列表视图中左侧标题的格式化日期文本,可以是字符串也可以是布尔值,如果为false
,则不显示。
listDayAltFormat
设置列表视图中右侧日期格式,可以是字符串也可以是布尔值,如果为false
,则不显示。
noEventsMessage
如果在给定的日期范围内没有任何事件,则在列表视图中显示的文本,默认是:"No events to display"
。