fullCalendar中文API官方文档

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(天数"htmlcode">

.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, 修改量不是很大. 主要是理清关系.

<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'></script>

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

<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.min.js'></script>

17. 主要概念:

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

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

　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插件的官方中文说明文档，您可以查看文章JS日程管理插件FullCalendar简单实例进行实际操作

参考文献：

官方文档：https://fullcalendar.io/docs/