jquery.fullCalendar日程管理控件中文API

作者：cywcd 发布：2015-12-23 18:22 字符数：22378 分类：javascript 阅读： 14,150 次抢沙发

fullCalendar日程管理控件官方资料:

jquery.fullCalendar官方网址: http://arshaw.com/fullcalendar/
jquery.fullCalendar英文文档: http://arshaw.com/fullcalendar/docs/
jquery.fullCalendar下载:http://arshaw.com/fullcalendar/download/

使用实例1-使用fullCalendar展开多个日历方法:

js调用api: gotoDate方法：

$('#calendar1').fullCalendar('gotoDate', 2015, 12, 1)

$('#calendar2').fullCalendar('gotoDate', 2016, 1, 1)

页面中html：

项目中自定义皮肤多日历使用示例图：

使用实例2-dayClick日历点击获取当前日期及格式化日期

js调用api: $.fullCalendar.formatDate(date,"yyyy-MM-dd")方法：

$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: '',
right: 'title'
},
timeFormat: 'H:mm',
axisFormat: 'H:mm',
dayClick: function(date, jsEvent, view){
//当前日期格式化
var curTime = $.fullCalendar.formatDate(date,"yyyy-MM-dd");
console.info(curTime);

}

});

项目中日历使用示例图：

fullCalendar日程管理控件中文翻译:

1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的是一个option对象

2. 普通属性

2.1. year, month, date: 整数, 初始化加载时的日期.

2.2. defaultView: 字符串类型, 默认是’month;

2.2.1. 允许的views:

2.2.1.1. month 一页显示一月, 日历样式

2.2.1.2. basicWeek 一页显示一周, 无特殊样式

2.2.1.3. basicDay 一页显示一天, 无特殊样式

2.2.1.4. agendaWeek 一页显示一周, 显示详细的24小时安排(也就是议事日程)

2.2.1.5. agendaDay 一页显示一天, 显示详细的24小时安排

2.3. header: 定义按钮/文本在日历的顶部, false说明不使用header., 使用left, center, right三个属性来进行布局, 默认是{left: ‘title’, center: ‘’, right: ‘today prev, next’}, 支持使用的属性按钮:

2.3.1. title: 一个包含当前日期的文本

2.3.2. prev: 根据view的不同, 返回上一月/周/天

2.3.3. next: 根据view的不同, 返回下一月/周/天

2.3.4. prevYear: 使日历返回到上一年

2.3.5. nextYear: 使日历返回下一年

2.3.6. today: 将日历移动到当天.

2.3.7. view name: 上面列举的支持views名称, 用来切换views

2.4. buttonText: 定义header中使用的按钮的显示文本: 接受的属性名: prev, next, prevYear等等

2.5. aspectRatio: 接受一个浮点参数, 调整宽高比例.

2.6. allDayDefault: 布尔类型, 默认true, 决定每个CalEvent的allDay属性的默认值. allDay标明一个日程事件是否是整天的, 也就是忽略具体的时间, 只计算天数. 默认情况下, 所有的新添加的日程时间不加说明, 都是allDay的, 可以通过设置allDayDefault, 使得新创建的日程时间, 默认情况下就是关注时间的.

2.7. weekends: 布尔类型, 默认为true, 标识是否显示周六和周日的列.

2.7.1. finxed: 每月固定显示6周.

2.7.2. liquid: 可能会显示4, 5, 6周, 依赖于月份, 每周的高度会拉长到填充可变高度, 视aspectRatio而定, 这里月份的高度是定的.

2.7.3. vairiable: 可能会显示4, 5, 6周, 依赖于月份, 每周的高度会有一个固定值, 也就是说, 整个月份的高度会随着有几周的行数而变化.

2.8. allDaySlot: 布尔值, 默认是true, 标明在agenda views模式下的时候, 上面的all-day小块是否显示.

2.9. allDayText: allDay区域的文本内容.

2.10. firstHour: 整型, 默认值为6. 表示在agenda的views中, 刚打开的时候显示的是第n小时, 该table用scroll控制.

2.11. slotMinutes: 整型, 默认值30, 表示在agenda的views中, 两个时间之间的间隔. 也就是没一个小时所在一行中另外分出来的每一个小行代表多少分钟.

2.12. defaultEventMinutes: 整型, 默认值120, 和事件有关, 功能不确定.

3. 日程编辑

3.1. editable: Boolean类型, 默认值false, 用来设置日历中的日程是否可以编辑. 可编辑是指可以移动, 改变大小等.

3.2. disableDragging: Boolean类型, 默认false, 所有的event可以拖动, 必须editable = true

3.3. diableResizing: Boolean, 默认false, 所有的event可以改变大小, 必须editable = true

3.4. dragRevertDuration: 拖动恢复的时间, 默认500毫秒, 表示一个不成功的拖动之后, 控件回复到原始位置的时间.

3.5. dragOpacity: Float类型, 表示拖动时候的不透明度. 指定一个float数值, 表示所有的views下都使用该不透明度, 也可以赋值为一个对象, 通过views hash来指定特定的views中的不透明度, 在以对象通过views hash指定不透明度时, 可以指定一部分, 然后, 其他的用’’: float的方式来标明其他的所有的views下都使用该不透明度.

3.5.1. month

3.5.2. week: basicWeek和agendaWeek

3.5.3. day: basicDay和agendaDay

3.5.4. agenda: agendaDay和agendaWeek

3.5.5. agendaDay

3.5.6. agendaWeek

3.5.7. basic: basicWeek和basicDay

3.5.8. basicWeek

3.5.9. basicDay

3.5.10. ‘’: 空的字符串, 表明所有其他的views

4. 时间和日期的格式化

4.1. 支持的格式化占位符

4.1.1. s: 秒

4.1.2. ss: 秒, 两位

4.1.3. m: 分钟

4.1.4. mm: 分钟, 两位

4.1.5. h: 小时, 12小时制

4.1.6. hh: 小时, 12小时制, 两位

4.1.7. H: 小时, 24小时制

4.1.8. HH: 小时, 24小时制, 两位

4.1.9. d: 日期数字

4.1.10. dd: 日期数字, 两位

4.1.11. ddd: 日期名称, 缩写

4.1.12. dddd: 日期名称, 全名

4.1.13. M: 月份数字

4.1.14. MM: 月份数字, 两位

4.1.15. MMM: 月份名称, 缩写

4.1.16. MMMM: 月份名称, 全名

4.1.17. yy: 两位的年份

4.1.18. yyyy: 4位的年份

4.1.19. t: 上下午加 a或者p

4.1.20. tt: 上下午加am或pm

4.1.21. T: 上下午加A 或者P

4.1.22. TT: 上下午加AM或PM

4.1.23. u: ISO8601格式

4.1.24. S: 给日期加上st, nd, rd, th等后缀, 表明是第几天

4.1.25. 特殊字符:

4.1.25.1. ‘…’ 原意输出文本

4.1.25.2. ‘’ 表示一个单引号

4.1.25.3. (…), 括号内的占位符表示的格式化日期中, 至少有一个不为空, 才显示括号内的这一组格式化字符串

4.2. titleFormat: string/object: 确定header中的title展示日期的格式, 这里也可以使用view hash的方式通过对象进行配置, 如果使用view hash的方式, 配置, 则每种view中的title的格式都是不一样的.

4.3. columnFormat: string/object, 和titleFormat配置方式一样, 影响各种view中的每列的表头显示文本. 文档中关于allDay为false时的解释不明白.

4.4. timeFormat: 默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.

4.5. axisFormat: string, 默认h(:mm)tt, 影响agenda views下的最左的一列的时间显示方式.

4.6. views hash: 现在支持view hashes的选项有: dragOpacity, titleFormat, columnFormat, timeFormat

5. formatDates:

$.fullCalendar.formatDates(date1, date2, formatString, [options]): 和formatDate类似, 但是接受两个date, 在格式化字符串中, 使用{…}来格式化第二个date

6. Event sources:

6.1. events: array/string/function:

6.1.1. 配置事件源

6.1.1.1. 数组是硬编码的日程事件.

6.1.1.2. 提供一个URL, 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定.

6.1.1.3. 提供一个函数, 以自定义的方式抓取数据, 该函数需要接受参数start, end, callback, 分别表示抓取的日程事件的开始时间, 结束时间, 抓取结束后的回调比如:
events: function(start, end, callback) {$.getJSON(“/myscript”, {start: start.getTime(), end: end.getTime()}, function(result) {callback(result);})}

6.2. eventSources: Array, 就像events选项一样, 但是, 这个用来配置多个日程事件数据来源.

6.3. startParam: string, 默认值: start, 这个就是在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间

6.4. endParam: string, 默认值: end, 和startParam参数意义相同, 表示要抓取的日程事件的终止时间

6.5. cacheParam: 当使用JSON url方式获取日程事件时, 为了防止ajax自身的缓存带来的数据不同步问题, 加入的鉴别参数名, 值是由full calendar控制加入的当前时间. 不懂可以查询ajax缓存解决方案.

7. CalEvent对象:

标准的当前使用的日程事件源(请注意区分这里的日程事件和计算机领域的事件之间的区别, 这里的事件是业务上的, 表明在某个时间做某事的一个记录, 而计算机领域的事件则是用户对计算机的一个动作)

7.1. id: Integer/String: 日程事件的标识, repeat型的日程事件拥有相同的id

7.2. title: string, 日程事件的标题

7.3. allDay: Boolean, 默认true, 标明一个日程事件是否是关注具体时间的, 如果是true, 表明该日程事件不关注具体时间, 是当天所有时间都有的, 所以, 该日程事件的日期会被忽略, 在agenda view中通过专门的allDay区域显示, 如果是false, 则是关注开始时间和结束时间的.

7.4. date: Date类型, 是start属性的别名

7.5. start: Date类型, 一个javascript的Date对象, 方便起见, 可以使用IETF格式, ISO8601格式以及UNIX时间戳等多种方式的字符串表示.

7.6. end: Date(可选的): 和start一样, 不过表示日程时间的结束时间.

7.6.1. 如果对应的日程事件是allDay的, 那么10月1日8时到10月3日8时就表示跨度是3天

7.6.2. 如果对应的日程时间不是allDay的, 那么10月1日8时10月3日8时则表示跨度是48个小时.

7.6.3. url: string, 设置一个url, 该日程事件被点击的时候使用, 新的页面默认在当前窗口打开, 如果使用更复杂的事件处理, 要使用eventClick触发动作(这份文档中使用了Triggered Action来描述计算机领域的事件, 防止了和该插件所在领域的日程事件冲突.)

8. 方法:

方法调用的方式: $(‘.selector’).fullCalendar(‘method_name’)首先使用一个jquery选择器获取日历控件对象, 然后, 调用fullCalendar(), 参数是字符串形式的方法名

8.1. prev, 跳转到前一月/周/天, 根据当前的view决定

8.2. next, 同prev, 是后一月/周/天

8.3. today, 跳转到今天.

8.4. gotoDate: 调用方式: $(‘.selector’).fullCalendar(‘gotoDate’, year[, month[, date]])调用方法名为gotoDate, 后面三个参数传递年, 月, 日, 年是必选, 其他两个可选. 其中的月month参数, 是以0开始计算的, 也就是说一月对应0. 该方法也可以使用单参数的方式调用, 传递一个javascript的Date对象.

8.5. incrementDate: $(‘.selector’).fullCalendar(‘incrementDate’, years[, months[, days]]) 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $(‘.selector’).fullCalendar(‘incrementDate’, -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数???呵呵)向前移动5天.

8.6. changeView: $(‘.selector’).fullCalendar(‘changeView’, viewName) 切换日历的view, viewName必须是允许的views

8.7. updateEvent: $(‘.selector’).fullCalendar(‘updateEvent’, calEvent) 更新日历空间中的一个日程事件, 如果是repeat的日程事件, 则都更新. 这里更新的calEvent对象必须是Triggered Action(触发事件)中作为参数传递的或clientEvents方法中返回的CalEvent实例, 也就是说必须是合法的, 在日历中可检索的.

8.8. renderEvent: $(‘.selector’).fullCalendar(‘renderEvent’, calEvent, [stick]) 将一个新的CalEvent对象渲染到日历中, 该对象至少要有title和start属性. 默认情况下, 新渲染的这个CalEvent对象在日历重新获取日程事件源(比如prev, 或next调用)的时候, 会消失, 如果设置stick参数为true, 则会保证新渲染的CalEvent对象永久保留.

8.9. removeEvents: $(‘.selector’).fullCalendar(‘removeEvents’, [idOrFilter]): 从日历中删除一个日程事件. 第二个参数可以不填, 可以填id, 可以是一个过滤器(一个函数,接受CalEvent对象作为参数)

8.9.1. 不填: 所有的日程事件被移除

8.9.2. id: 指定id匹配的所有的日程事件被移除

8.9.3. 过滤器: 过滤器接受CalEvent对象作为参数, 在过滤器内部, 通过一些策略处理, 如果需要移除, 则返回true, 否则返回false.

8.9.4. clientEvents: $(‘.selector’).fullCalendar(‘clientEvents’, [idOrFilter]): 返回FullCalendar已经存储到客户端的CalEvents对象数组, 第二个参数和removeEvents方法的第二个参数意义相同, 只不过在过滤器中, 如果返回true, 则该CalEvent对象将被加入到返回的数组中

8.9.5. addEventSource: $(‘.selector’).fullCalendar(‘addEventSource’, source): 添加一个日程事件源, 添加之后, FullCalendar会马上从该源获取日程事件, 并加载到日历中. 第二个参数和定义Calendar时候使用的url参数一致.

8.9.6. removeEventSource: $(‘.selector’).fullCalendar(‘removeEventSource’, source) 移除一个日程事件源, 该源上获取得到的日程时间也将被马上从日历中移除.

8.9.7. rerenderEvents: $(‘.selector’).fullCalendar(‘rerenderEvents’) 重新渲染屏幕上的所有日程事件.

8.9.8. refetchEvents: $(‘.selector’).fullCalendar(‘refetchEvents’) 重新抓取所有的日程事件源上的日程事件并渲染它们.

8.9.9. render: $(‘.selector’).fullCalendar(‘render’): 该方法用来立刻渲染整个日历, 在一个可见的元素上调用fullCalendar的时候, 该方法会自动调用, 如果是在一个隐藏的元素上调用, 则需要尽快的手动调用使该元素可见并渲染.

9. 触发事件(Triggered Action): 计算机领域中的事件

9.1. viewDisplay: function(view)…..每次日历加载以及日历的view改变的时候触发一次. 接受的view就是前面一直有提到的view对应的对象.

9.2. loading: function(isLoading, view)…..日历开始加载的时候, isLoading参数为true触发一次, 日历加载完毕, isLoading参数为false触发一次.

9.3. windowResize: function(view) 由于包含日历的窗口大小发生变化导致日历控件大小发生变化时触发. (这个方法中的this变量指向哪个元素不清楚, 因为我这边浏览器改变大小没有导致日历大小改变.)

9.4. dayClick(dayDate, allDay, jsEvent, view): 用户点击day的时候触发, dayDate是点击的day的时间(如果在agenda view, 还包含时间), 在month view下点击一天时, allDay是true, 在agenda模式下, 点击all-day的窄条时, allDay是true, 点击其他的agenda view下的day则为false, jsEvent就是一个普通的javascript事件, 包含的是click事件的基础信息. 在这个方法中, this获得的是一个普通的HTML的DOM元素, 是包含该日期的一个TD

9.5. eventRender: function(calEvent, element, view): 日程事件渲染之前触发. calEvent是一个CalEvent日程事件对象, element是calEvent对象对应的JQuery对象. view就是当前所处的view的实例对象, 这个方法中使用关键字this获得的是calEvent对象的引用. 这个事件的处理方法如果返回false, 可以阻止渲染所有的日程事件. 该方法中可以通过修改jquery对象element来改变具体的渲染方式, 因此可以很好的和其他插件结合使用.

9.6. eventClick, eventMouseover, eventMouseout: function(calEvent, jsEvent, view): 日程事件被点击, 鼠标划过, 鼠标离开的事件. 参数和上面介绍过的同名参数一致. 这里的eventClick事件如果返回false, 可以阻止浏览器跳转到对应日程事件在初始配置时指定的url地址. 这种事件的阻止传播可以参照DHTML文档关于事件的传播和原始响应.

9.7. eventDragStart, eventDragStop: function(calEvent, jsEvent, ui, view)日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动, 只要日程事件的控件被拖着动了, 事件就触发. 同名参数和上面介绍过的一样. UI保存的是一个JQuery的UI对象. 可以从该对象中获取位移, 位置等数据.

9.8. eventDrop: function(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) 在一个日程事件被移动, 并成功移动到另外一个日期/时间.

9.8.1. dayDelta: 保存了这次拖动导致该日程事件移动了多少天, 向前为正数, 向后为负数.

9.8.2. minuteDelta: 保存了这次拖动导致该日程事件移动了多少分钟, 向前为正数, 向后为负数. 该值只有在agenda view下有效.

9.8.3. allDay: 如果在month view下移动, 或在agenda view下移动到all-day区域, 则allDay为true, 移动到agenda view的其他区域则为false

9.8.4. revertFunc: 调用该方法, 可以将刚才的拖动恢复到原状. 这个方法多用于ajax的提交, 移动之后, 提交数据到后台, 如果后台更新失败, 根据返回消息, 调用这个方法, 可以使页面回复原状.

9.8.5. eventResizeStart, eventResizeStop: function(calEvent, jsEvent, ui, view): 在一个日程事件改变大小之前之后发生(不一定要改变成功.) calEvent保存了日程事件信息(date, title, 等等)

9.8.6. eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view): 在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致.

10. View 对象

10.1. name: 前面列举的那些view名称

10.2. title: string: 切换到view的时候, 可以在header中设置的title变量的值.

10.3. start: Date类型, 该view下的第一天.

10.4. end: Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天.

10.5. visStart: Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致.

10.6. visEnd: Date类型, 最后一个可访问的day

11. 颜色的修改: 通过重写css实现

11.1. 示例一:

.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
        background-color: black; /* background color */
        border-color: black;     /* border color (often same as background-color) */
        color: red;              /* text color */
        }

11.2. 示例二

.holiday,
.fc-agenda .holiday .fc-event-time,
.holiday a {
        background-color: green; /* background color */
        border-color: green;     /* border color (often same as background-color) */
        color: yellow;           /* text color */
    }

12. 主题, 使用jquery ui提供的主题

12.1. theme: Boolean, 默认false, 设置为true, 允许使用jquery的ui主题

12.2. buttonIcons: Object, 改变header中使用的prev, next等变量对应按钮的样式, 默认的样式是:

{
        prev: 'circle-triangle-w',
        next: 'circle-triangle-e'
}

13. 本地化选项:

13.1. firstDay: Integer类型, 默认值0. 一周中显示的第一天是哪天. 星期天是0, 星期一是1, 类推.

13.2. monthNames: Array, 月份全名使用的字符串, 默认是英文的月份名称全称.

13.3. monthNamesShort: Array, 月份简写使用的字符串, 默认是英文月份名称简写

13.4. dayNames: Array, 星期的全名使用的字符串, 默认是英文的星期的名称全称.

13.5. dayNamesShort: Array, 星期的简写使用的字符串, 默认是英文星期的名称简写

13.6. buttonText和allDayText在最初的2.4和2.9部分已经介绍.

14. 日期工具

14.1. 格式化日期: $.fullCalendar.formatDate(date, formatString[, options]), 通过指定的格式格式化一个日期, 返回一个字符串. options选项是一个对象, 其中设置本地化变量支持的属性值. 比如{ monthNames : [‘一月’, ‘二月’, ……], dayNames: [‘周日’, ‘周一’, …..]}

14.2. 一次格式化两个日期: $.fullCalendar.formatDate(date1, date2, formatString[, options]): 和上一个格式化日期类似, 只不过, 这里在formatString中使用大括号{…}来描述第二个日期的格式化方式.

14.3. 解析日期: $.fullCalendar.parseDate(string): 将一个字符串格式成一个javascript的Date对象, 这个string可以是ISO8601, IETF, UNIX时间戳三种格式.

14.4. parseISO8601: $fullCalendar.parseISO8601(string[, ignoreTimezone]) 将一个ISO8601字符串转换成一个javascript 的Date对象.

15. 将日程和google的日程管理连接起来.

15.1. 需要引入另外一个js文件: gcal.js

15.2. events: $.fullCalendar.gcalFeed(‘自己的google calendar 的feed地址’, {editable: false, className: ‘gcal-events’, currentTimeZone: ‘自己在google calendar上设置的时区’}) 这样就将自己的google calendar上的日程和自己的应用挂接起来了.

15.3. 下面是我自己关联自己的google calendar的代码:

$(document).ready(function() {

$('#calendar').fullCalendar({

defaultView: 'agendaWeek',

events: $.fullCalendar.gcalFeed(

'http://www.google.com/calendar/feeds/lgg860911%40yahoo.com.cn/private-184462b11481a96cf9835fbb6486dbe6/basic',

{

eidtable: true,

className: 'gcal-events',

//currentTimezone: 'Asia/Chongqing'

currentTimezone: 'Asia/Tokyo'

}

)

});

16. 总结:

16.1. 使用时, 下载发布版本, 而不是开发版本

16.2. 需要引入的文件:

<!—这个css可以根据自己的情况, 修改成自己喜欢的样式. 500行的css, 修改量不是很大. 主要是理清关系. -->

<!—以下4个js文件是jquery-ui相关的包, 可以使用fullcalendar中自带的, 也可以自己到jquery的ui官方库自己订阅一个合适自己使用的min版, 那样, 就会得到一个有选择的, 经过压缩的单独的一个js文件. 效率上比较高. -->

17. 主要概念:

17.1. 日历: 整个日历控件的div, 也就是我们$(‘#calendar’).fullCalendar这样使用的时候id为calendar的容器.

17.2. 日程事件: 某一条日程记录, 比如: 2009年11月16日星期一晚上11点11分11秒111毫秒, 事件title为: “selfimpr, 需要做某某工作.

17.3. 触发动作: 经过Jquery封装的javascript事件….

17.4. jsEvent: 原始的javascript事件.

17.5. 由于javascript是动态语言, 所以, 对于calEvent对象或其他任何对象而言, 想要保存一些数据, 直接设置就可以了, 比如, 你想在calEvent中保存女朋友的名字, 那就可以calEvent.girl_friend_name = ‘beautiful girl’, 到你用的时候, 你就可以直接拿到了….用的时候, 最好这样来用: my_girl_friend_name = calEvent.girl_friend_name || “another beautiful girl”; 这样, 当你保存在calEvent中的女朋友因为中间操作丢失, 或者你根本没有保存上你还不知道的时候, 你就可以得到another beautiful girl, 而不至于一无所获, 甚至引发一些不必要的麻烦(浏览器上的警告, 说你试图调用一个undefined对象的属性).

18. 领域模型:

自己根据自己的理解画的, 希望可以帮到大家理解这个日程管理的概念.

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月" 或 "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，返回当前日历中的日期

文本与时间定制

你可以根据项目需求设置日历显示的文本信息，如中文的月份等。

属性	描述	默认值
timeFormat	设置显示的日程事件的时间格式，如timeFormat: 'H:mm' 则显示24小时制的像10:30	{agenda: ‘h:mm{ - h:mm}}
columnFormat	设置显示日历每列表头信息的格式文本，默认： { month: 'ddd', // Mon week: 'ddd M/d', // Mon 9/7 day: 'dddd M/d' // Monday 9/7 }	见描述
titleFormat	设置用于显示日历头部的文本信息，默认： { month: 'MMMM yyyy', // September 2013 week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2013 day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013 }	见描述
buttonText	设置日历头部各按钮的显示文本信息，默认： { prev: '‹', // ‹ next: '›', // › prevYear: '«', // « nextYear: '»', // » today: 'today', month: 'month', week: 'week', day: 'day' }	见描述
monthNames	月份全称，默认： ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']	见描述
monthNamesShort	月份名称简写，默认：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	见描述
dayNames	星期全称，默认：['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']	见描述
dayNamesShort	星期名称简写，默认：['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	见描述
weekNumberTitle	周次，即一年中的第几周	"W"

鼠标单击和滑过

以下列出的是当鼠标单击或者滑过日历中的某个元素时，回调的函数callback。

属性	描述
dayClick	当单击日历中的某一天时，触发callback，用法： $('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { do something... } }); date是点击的day的时间(如果在agenda view, 还包含时间)，在月view下点击一天时，allDay是true，在agenda模式下，点击all-day的窄条时，allDay是true，点击其他的agenda view下的day则为false，jsEvent就是一个普通的javascript事件，包含的是click事件的基础信息。
eventClick	当点击日历中的某一日程（事件）时，触发此操作，用法： $('#calendar').fullCalendar({ dayClick: function(event, jsEvent, view) { do something... } }); event是日程（事件）对象，jsEvent是个javascript事件，view是当前视图对象。
eventMouseover eventMouseout	鼠标划过和离开的事件，用法和参数同上

选择操作

属性	描述	默认值
selectable	是否允许用户通过单击或拖动选择日历中的对象，包括天和时间。	false
selectHelper	当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。	false
unselectAuto	当点击页面日历以外的位置时，是否自动取消当前的选中状态。	true
unselectCancel	指定哪些元素不会清空当前的选中，以JQUERY选择器的方式指定 '#someId'。	''
select	callback，被选中的函数回调，使用方法： function( startDate, endDate, allDay, jsEvent, view ) startDate：被选中区域的开始时间 endDate：被选中区域的结束时间 allDay：是否为全天事件 startDate：jascript对象 startDate：当前视图对象
unselect	callback，选中被取消时的回调，使用方法： function( view, jsEvent )
select	method，选中某个时间，使用方法： $('#calendar').fullCalendar( 'select', startDate, endDate, allDay )
unselect	method，取消选中，使用方法： $('#calendar').fullCalendar( 'unselect' )

日程事件数据

FullCalendar最重要的部分，设置用于日程事件相关信息。

Event Object，事件对象，用来存储一个日历事件信息的标准对象，只有title和start是必须的

属性	描述
id	可选，事件唯一标识，重复的事件具有相同的id
title	必须，事件在日历上显示的title
allDay	可选，true 或 false，是否是全天事件。
start	必须，事件的开始时间。
end	可选，结束时间。
url	可选，当指定后，事件被点击将打开对应url。
className	指定事件的样式。
editable	事件是否可编辑，可编辑是指可以移动, 改变大小等。
source	指向次event的eventsource对象。
color	背景和边框颜色。
backgroundColor	背景颜色。
borderColor	边框颜色。
textColor	文本颜色。

事件源对象

事件源即日历中的数据来源，FullCalendar提供了数组、函数调用、以及JSON数据的形式，当然也可以通过Google Calendar feed获取数据接口。helloweba.com后面会有文章专门介绍事件数据的操作，包括数据的查询、写入、更新和删除操作。

以下是Event事件相关的参数属性说明。

属性	描述	默认值
eventSources	事件源，存储数组对象，可以是Arrays/Functions/URLs。
allDayDefault	是否为全天日程事件，显示这一天中所做的事情。	true
ignoreTimezone	是否忽略时区。	true
startParam	在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间。	'start'
endParam	和startParam参数意义相同, 表示要抓取的日程事件的终止时间。	'end'
lazyFetching	是否从缓存信息获取event。比如从月视图切换到周视图。	true
eventDataTransform	callback，将外部数据源转换成Fullcalendar可以处理的数据
loading	callback，日历开始加载的时候，isLoading参数为true触发一次，日历加载完毕，isLoading参数为false触发一次，用法： function(isLoading, view)
updateEvent	method，更新日历空间中的一个日程事件，如果是重复的日程事件，则都更新。用法： $('#calendar').fullCalendar( 'updateEvent', event )
clientEvents	method，返回FullCalendar已经存储到客户端的CalEvents对象数组，第二个参数和removeEvents方法的第二个参数意义相同，只不过在过滤器中，如果返回true，则该CalEvent对象将被加入到返回的数组中。
removeEvents	method，从日历中删除一个日程事件. 第二个参数可以不填，可以填id，可以是一个过滤器(一个函数，接受CalEvent对象作为参数)。用法： $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )
refetchEvents	method，重新抓取所有的日程事件源上的日程事件并渲染它们。
addEventSource	method，添加一个日程事件源，添加之后， FullCalendar会马上从该源获取日程事件，并加载到日历中。第二个参数和定义Calendar时候使用的url参数一致。
removeEventSource	method，移除一个日程事件源，该源上获取得到的日程时间也将被马上从日历中移除。

事件渲染

属性	描述
eventColor eventBackgroundColor eventBorderColor eventTextColor	设置日程事件的背景色和边框色，以及文本颜色。可以使用任意支持css的颜色方式，如 #f00, #ff0000, rgb(255,0,0), 或 red。
eventRender	callback，当日程事件渲染时触发，用法： function(calEvent, element, view)
eventAfterRender	callback，当日程事件被渲染后触发，用法： function( event, element, view ) { }
eventDestroy	callback，当日程事件移出时触发，用法： function( event, element, view ) { }
renderEvent	method，一旦日历重新取得日程源，则原有日程将消失，当指定stick为true时，日程将永久的保存到日历上。
rerenderEvents	method，重新渲染所有事件。

日程事件拖动和缩放

拖动和缩放功能依赖于jQuery ui的draggable和resizable，所以在使用时要提前加载jQuery ui相关插件。

属性	描述	默认值
editable	是否可编辑，即进行可拖动和缩放操作。	false
eventStartEditable	是否让事件在开始时就可以拖动。	true
dragRevertDuration	如果拖拽不成功，多久回复原状，毫秒	500
dragOpacity	拖动时候的不透明度。 { agenda:.5 //对于agenda试图 '':1.0 //其他视图 }	见描述
eventDragStart, eventDragStop	callback，日程事件被拖动之前和之后触发。这里的拖动不一定是一个有效的拖动，只要日程事件的控件被拖着动了，事件就触发。可以从该对象中获取位移，位置等数据。用法： function( event, jsEvent, ui, view ) { }
eventDrop	callback，当拖拽完成并且时间改变时触发，用法： function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { } ayDelta 保存日程向前或者向后移动了多少天 minuteDelta 这个值只有在agenda视图有效，移动的时间 allDay 如果是月视图，或者是agenda视图的全天日程，此值为true,否则为false
eventResizeStart, eventResizeStop	callback，在一个日程事件改变大小之前之后发生(不一定要改变成功)，用法： function( event, jsEvent, ui, view ) { }
eventResize	callback，在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致。用法： function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }

日期工具

函数	描述
formatDate	格式化日期，通过指定的格式格式化一个日期，返回一个字符串。options选项是一个对象，其中设置本地化变量支持的属性值. 比如{ monthNames : ['一月'，'二月'，……]，dayNames: ['周日'，'周一'，…..]}，用法： $.fullCalendar.formatDate( date，formatString [,options ] )
formatDates	一次格式化两个日期，和上一个格式化日期类似，只不过，这里在formatString中使用大括号{…}来描述第二个日期的格式化方式。用法： $.fullCalendar.formatDates( date1，date2，formatString [,options ] )
parseDate	解析日期，将一个字符串格式成一个javascript的Date对象，这个string可以是ISO8601，IETF，UNIX时间戳三种格式。用法: $.fullCalendar.parseDate( string )
parseISO8601	将一个ISO8601字符串转换成一个javascript 的Date对象。用法： $.fullCalendar.parseISO8601( string [,ignoreTimezone ] )

参考资料：

1.http://blog.csdn.net/lgg201/article/details/4818941

2.http://www.helloweba.com/view-blog-231.html

分享到：微信豆瓣网 QQ好友 QQ空间新浪微博人人网有道云笔记复制网址

本文固定链接: http://www.webzsky.com/?p=743 | 蓝戒的博客

该日志由 cywcd 于2015年12月23日发表在 javascript 分类下，你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jquery.fullCalendar日程管理控件中文API | 蓝戒的博客

【上一篇】Javascript中Window对象的属性、方法、事件一览
【下一篇】daterangepicker日期范围选择插件使用方法