月光光通过本文主要向大家介绍了fullcalendar.js,fullcalendar.min.js,日程安排fullcalendar,fullcalendar插件,fullcalendar等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
JS日程管理插件FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，以供参阅
普通显示设置
| 属性 | 描述 | 默认值 |
| 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 | 事件默认的时间执行长度，如果事件对象没有指定执行多长时间，则默认执行两个小时 |
您可能想查找下面的文章:文章分类 |