FullCalendar 官方文档翻译

在引入了相应的JavaScript和CSS样式表后，在$(‘#div_name’)元素上配置fullCalendar方法时，默认会接受一个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小时安排

header定义了按钮/文本在日历顶端的位置；当设置为false时则不会显示该元素；通过left、center、right三个布局属性进行排版，默认情况下，默认布局设置为{left: 'title', center: '', right: 'today prev, next'}；支持使用的包括左部、中部和右部三种类型；其中左部布局设置为'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 调用语言: 定义在header中使用的按钮显示文本的方式; 接受如prev、next、prevYear等属性名

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

2.6. allDayDefault: 设置为boolean类型的布尔值，默认为true，并用于指定所有日程事件的时间段属性。该属性表示某个日程事件是否跨越整天，在计算时会忽略具体的时间点仅计算天数。determine default settings for newly added events to set the allDay attribute as default value of true if not specified otherwise

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

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

2.7.2. liquid: 其呈现情况可能为4至6周区间，并基于所属月份进行调整；每周的高度会被延伸至填充相应的可变高度，并取决于其 aspectRatio设置；其中针对各个月份而言的高度是固定的。

variable： 可能显示四周到四周之间（例如4、5或6）个星期内的数据情况，并且这些数据的具体数值也会受到月份的影响。具体来说，在每个月中每一个星期的数据高度都有一个固定的数值，并且整个月份中每一个星期的数据高度可能会根据该月有多少个工作日而有所差异。

2.8. allDaySlot: 一个布尔标志位，默认设置为true，在 agenda views模式启用时标识所有日小块是否显示。

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

2.10. firstHour: 整型, default value is 6. This field indicates the hour segment displayed in agenda views when the table is initially opened. The time span is measured in hours, and the table's visibility is controlled using a scrollbar.

slotMinutes: 整数类型, 默认值为30 min, 表示 agenda 中 views 之间的间隔时间. 每个小时内分时单元代表多少分钟.

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

3. 日程编辑

editability设为布尔型数据类型，默认值为false. 用于指定日历中的事件是否可编辑. 指用户能够拖动事件到其他位置，并调整其尺寸.

disableDragging 属于 Boolean 类型，默认值为 false；任何 event 可以被拖动的前提是确保 editabler 属性设为 true。

3.3. disableResizing: Boolean, 设为false, 所有的event能够调整大小, 要求editble必须设为true

3.4. dragRevertDuration: 拖拽恢复所需的时间为... 500毫秒；该属性具体说明在未成功操作时控制件会回复到原始位置的情况。

dragOpacity字段的数据类型为浮点数（Float），其作用是控制物体在拖动过程中的可见性程度。系统允许用户设定一个具体的浮点数值，默认情况下所有视图在拖动过程中均保持这一不透明度；此外还可以定义一个对象（Object），并通过viewHash属性可针对特定视图设定其拖动时的不透明度。当使用对象形式并结合viewHash属性时，可以部分设定不同视图的拖动不可见性参数；剩余未被明确指定的视图则将采用系统默认值dragOpacity。

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显示日期的格式。此外，还可以通过对象配置视图哈希的方式来实现。若采用视图哈希方式进行配置，则每个视图中的title展示格式将有所不同。

4.3. columnFormat被配置为string或object类型，并与titleFormat的配置方式一致，在各个视图中所有列的表头显示文本均会受到影响。对于allDay属性设置为false时文档中的解释仍不够清晰

4.4. timeFormat: 它的默认值是{agenda: 'h:mm{- h:mm}'}, 用于确定在日程中显示的时间格式。

4.5. axisFormat属性设置为string类型，默认采用hh:mm:ss的时间格式，在agenda views中仅显示最左侧的一列时间信息

4.6. 视图哈希：现有支持的视图哈希选项包括：拖放透明度（dragOpacity）、标题格式（titleFormat）、列格式（columnFormat）和时间格式（timeFormat）。

formatDates: $fullCalendar.formatDates(date1, date2, formatString, [options]): 类似于用于单个日期的formatDate函数，在此实现中同时支持处理两个日期，并且在格式字符串中使用{…}来指定第二个日期的格式

6. Event sources:

6.1. events: array/string/function:

6.1.1. 配置事件源

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

该功能能够生成一个URL资源，并通过访问该URL获取到一个包含日程安排的JSON数据或以数组形式呈现的信息；该资源返回的数据类型将根据提供的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选项, 该字段用于指定多条日程事件的数据来源.

在这个段落中定义了一个变量startParam（6.3号段落），它是一个字符串类型，默认设置为'start'。在利用该变量时，在获取events数据源的过程中，在相应的URL中会自动地将该变量作为参数被直接插入至 URL 中，并且该参数表示的是要抓取的日程事件的时间起点。

6.4. termParam: string类型的变量名，在缺省情况下设为end，并与startParam参数具有相同的含义。它表示从日历中提取事件的时间截止点。

cacheParam: 当采用JSON URL的方式获取日程事件时, 为了避免Ajax自身缓存导致的时间同步问题, 在URL中添加了一个鉴别参数名称, 其值由full calendar在实时时间戳中生成. 如需进一步了解或解决问题, 请参考相关的Ajax缓存解决方案.

CalEvent对象：系统中用于管理当前使用的日程安排的标准模块（特别提醒注意区分这里的日程安排与计算机系统中的操作行为之间的区别：这里的安排属于业务层面的内容，用于记录特定时间段内执行的具体操作；而计算机领域中的相关行为则通常指用户对计算机系统的操作行为）

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

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

7.3. allDay 是布尔类型变量，默认设置为 true。它标识一个日程事件是否专注于特定时间段。当设置为 true 时，则表示该日程事件不关心具体时间段；相反地（即 false），则会聚焦于开始时间和结束时间段，在 agendaview 中会单独显示这一安排，并在 agenda view 中通过独立指定 allDay 区域来展示。

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

开始于：JavaScript的Date对象。为了便于起见，可以将其表示为IETF格式、ISO8601格式以及基于UNIX时间戳的各种字符串形式。

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

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

当对应的时间段不为allDay类型时，则表明时间段从10月1日8时到10月3日8时跨越了48小时。

7.6.3. URL字段类型：字符串类型，在某个特定日程事件发生时应用；新创建的页面会自动打开当前窗口。当进行较为复杂的事件处理时，请确保调用eventClick触发动作。本文件中采用Triggered Action来描述计算机领域中的相关事件，并采取措施避免与本插件所属领域的日程活动产生冲突。

方法: 方法的调用方式: $(‘.selector’).fullCalendar(‘method_name’)通过jquery选择器获取日历控件对象, 进而调用fullCalendar()函数, 其参数为字符串形式的方法名称

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

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

8.3. today, 跳转到今天.

8.4. gotoDate: 调用方法名为gotoDate，通过$(‘.selector’).fullCalendar函数来实现。其中年、月、日为必要参数（年为必填），其他参数可选。其中月份（month）以0起算，即1月对应数值0。也可通过传递一个JavaScript Date对象来完成单一调用。

基于当前时间设置的增量操作中, 该函数允许用户通过指定年份、月份和天数的变化来调整日历显示范围。例如: $(‘.selector’).fullCalendar(‘incrementDate’, -3, 2, -5)表示将年份向前偏移3个单位, 调整月份向后延展2个单位长度, 并将天数设定为-5个单位（即向前偏移5天）。

8.6. changeView: 使用fullCalendar方法切换到指定视图（参数为'changeView'和'viewName'），其中'viewName'必须是授权的日历视图。

updateEvent: $(‘.selector’).fullCalendar(‘updateEvent’, calEvent)用于在日历空间中更新一个日程事件。对于repeat类型的日程事件，则会进行全部更新。需要注意的是，在此操作中使用的calEvent对象仅限于Triggered Action（触发事件）中作为参数传递或通过clientEvents方法返回的具体CalEvent实例，并且这些对象必须合法且可在日历系统内检索到。

$(‘.selector’).fullCalendar(‘renderEvent’, calEvent, [stick]) 将一个CalEvent对象渲染到日历中，并要求该对象至少具备title和start属性。通常情况下，在日历重获事件源时（如prev或next调用），该对象会暂时消失。若stick参数设为true，则该CalEvent对象将永久保留。

8.9. deleteEvents: $(‘.selector’).fullCalendar(deleteEvents, [idOrFilter]): 从日历中删除事件。第二个参数可选；若提供，则可指定具体ID或设置过滤条件；过滤条件可定义为函数形式。

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

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

8.9.3号过滤器: 该过滤器采用CalEvent对象作为输入参数，在其中内部通过一系列策略进行处理。若需去除对应事件，则应返回布尔值true；否则返回false。

8.9.4．clientEvents: (‘．selector’)．fullCalendar(‘clientEvents’, [idOrFilter])：将会预先存储至客户端全 Calendar 的 Cal Events 对象数组；其中第二个参数与 remove Events 方法中的第二个参数具有相同的功能，在过滤器设置中，则当过滤器函数返回 true 时会包含相应的 Cal Event 对象进 入结果数组。

8.9.\textbackslash{}5. 调用addEventSource函数:$(\textbackslash{} '.selector' ).fullCalendar(\textbackslash{} 'addEventSource', source) 以便创建一个日程事件源。\n\n一旦创建该\textbackslash{} texttt{event source} 后,$ fullcalendar 将立即从该来源获取并显示这些\texttt{event data}。\n\n其中第二个参数与之前定义Calender时使用的URL路径保持一致。\

8.9.6. 移除一个日程事件源, 并使该事件源上获取的日程时间立即从日历中被移除.$$(‘.selector’).fullCalendar(‘removeEventSource’, source)

8.9.7. rerenderEvents: $(\text{'!.selector'}\text{)}\reneWingCalendar(\text{'!.reRnderEvents'}) 全重绘工作表的日程安排.

8.9.8. refetchEvents: $(‘.selector’).fullCalendar(‘refetchEvents’) 所有日程事件数据源中的日程事件将被重新获取并渲染这些。

8.9.9. render:$(\text{'.selector'})\ fullCalendar(\text{render}):\text{此函数用于即时展示完整的日历}\ ，当在一个明显可视的位置执行 fullCalendar 函数时会触发此函数。\ 如果是在不可见状态下被激活\ ，则必须及时切换到可见区域并通过手动操作来显示内容\ 。

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

9.1. viewDisplay: function(view)…在每次日历加载及视图（view）发生变更时自动触发一次。该函数接受的视图即为前面所述对应的具体对象。

在9.2版本中，日历状态被定义为一个函数loading: function(isLoading, view)，该函数用于检测当前状态。当isLoading参数为true时会触发一次；当日历加载完毕后（即isLoading参数变为false时），又会触发一次。

9.3. windowResize: function(view) 当包含日历的窗口发生尺寸变化时会触发此函数。然而，在我的测试中发现该方法中的this变量指向哪个元素尚不明确，并且我在浏览器端缩放操作并未影响到日历尺寸的变化。

function dayClick(dayDate, allDay, jsEvent, view): 当用户点击日历时触发此事件。该函数中参数dayDate表示用户点击日期的时间信息；在month视图下选择完整日期时allDay设为true，在agenda模式下：

• 点击单个agenda视图中的day单元格时，默认allDay设为false
• 点击agenda视图中的all-day条目时，默认allDay设为true
• jsEvent是一个普通的JavaScript事件对象，默认包含click事件的基本信息
  此方法返回一个普通的HTML DOM元素对象，在该DOM树中包含对应日期的TD元素

在日程事件渲染之前触发的一个函数：名称为eventRender。其中，calEvent是一个JavaScript定义中的CalEvent日程事件对象；而element则是与之对应的jQuery的对象；view是指当前所处视图实例的对象。在这个函数体内使用this关键字可获得calEvent对象的引用。如果该处理方法返回false，则可阻止所有日程事件的渲染。通过修改jquery中的element变量即可调整具体的渲染方式；从而能够很好地与其他插件协同工作。

9.6. eventClick, eventMouseover, eventMouseout: function(calEvent, jsEvent, view): 当eventClick返回false时\则能够阻止浏览器导航至该日程安排在初始设置中指定的位置。\此行为可以通过参考DHTML文档中的相关知识来实现。

9.7. 当处理开始（eventDragStart）和结束（eventDragStop）时，在函数中接收calEvent、jsEvent、ui和view作为参数。
这些函数会在拖动物体开始和结束时触发。
即使这样的 drag 操作并非有效操作。
但只要 daydreaming 界面中的控件发生移动就会触发。
其中 UI 部分基于 jQuery 构建。
并且可以从该对象中获取位移信息以及位置数据。

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视图时, 或者在agenda视图下的所有日程区域进行操作时, 该字段设为true; 若用户仅处于agenda视图下的非全天时间段, 则该字段设为false

9.8.4. revertFunc: 通过调用此函数可以实现将当前操作恢复到最初状态。 此函数主要应用于AJAX提交流程中，在移动设备端提交数据后若后台服务出现错误返回相应信息时可以通过此函数来重置页面状态。

9.8.5. eventResizeStart, eventResizeStop: function(calEvent, jsEvent, ui, view): 在一个日程事件尺寸变化前前后触发（不一定成功）。calEvent包含了日程事件信息（如日期、标题等）。

9.8.6. eventResize: function(calEvent|callers,delta|dayDelta,minDelta|minuteΔ,revertFun|revertFunc,jScript|jsEvent,uInterface|ui,vIEW|view): 被赋予 callers（被调用事件）、dayΔ（天数变化量）、minΔ（分钟变化量）、revertFun（还原函数）、jScript（JavaScript事件）、uInterface（用户界面）和 vIEW（视图）等参数；在成功触发时修改日程事件的大小；其参数与 eventDrop 参数的操作方式一致.

10. View 对象

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

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

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

第10.4条：结束字段为Date类型，在该视图中表示最后一天。因为是闭合值的原因，则该结束字段代表的是下一个周期的第一天。比如在month视图中，则该结束字段代表的是下一个周期的第一天。

在该字段属于Date类型的情况下，在该视图中初始可用的第一个day/month视图中显示的是当月的第一个日期，在week视图中则通常与start相同。

在该字段属于Date类型的情况下，在该视图中初始可用的第一个day/month视图中显示的是当月的第一个日期，在week视图中则通常与start相同。

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

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

11.1. 示例一:

.fc事件、.fc会议事件时间以及.fc事件的子类将采用黑色背景并带有黑色边框。这些元素的文字将被染成红色。/ * 背景颜色 * / / * 边框颜色（通常与背景颜色相同） * /文字颜色设置为红色。</>第十一章第2节示例二

.Holiday,.FC-Agenda中的 Holiday 类别与 Event Time类别中的 Holiday 样式。
/背景颜色/
边框颜色设为绿色。
文本颜色设置为黄色。
主题设置为：基于jQuery UI提供的主题样式。

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

12.2. buttonIcons: 该组件采用Object类型。用于调整header中上一篇与下篇按钮样式的一组变量，默认样式为：

{ prev: 'circle-triangle-w', next: 'circle-triangle-e'}13. 本地化选项:

firstDay变量属于Integer类型且初始值设置为0。一周中的第一天采用如下规则表示：星期日对应数值0，星期一对应数值1依次类推。

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

monthNamesShort: Array, 月份数字简写字段，默认为英文月份名称缩略形式

13.4. dayNames: Array, which represents the full names of days as strings, defaulting to English weekday names.

13.5. dayNamesShort: Array, 表示一周中某一天标识符的文字串，默认采用英语中一周各日名称的缩略形式

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

14. 日期工具

fullCalendar.formatDate(date, formatString[, options]) 该日期将被按照指定格式进行时间表示处理，并生成一个符合此格式的时间字符串。其中配置了本地化的变量支持选项；例如，在 monthNames 属性中设置{‘一月’, ‘二月’,…}等具体值以实现不同月份名称的表现形式。

第14.2节，在一次操作中同时对两个日期进行格式化时：$.fullCalendar.formatDate(date1, date2, formatString[, options])：类似于对单个日期进行处理的方式，在此操作中，则通过在formatString中采用{…}的形式来指定第二个日期的特定样式。

14.3. 解析日期: $.fullCalendar.parseDate(string): 将该字符串转换为JavaScript Date对象, 该string接受ISO8601、IETF以及UNIX时间戳三种不同的格式.

第十四章第4节 parseISO8601: $fullCalendar.parseISO8601(string[, ignoreTimezone]) 会生成一个JavaScript Date对象。

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

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

15.2. events: $.fullCalendar.gcalFeed('个人Google日历地址', {editable: false, className: 'gcal-events', currentTimeZone: '个人所在Google日历的时间区'}) 通过这种方式实现了该用户的Google日历事件与应用程序之间的集成。

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

$(document).ready(function() {

$('#calendar').fullCalendar({

defaultView: 'agendaWeek',

events: $.fullCalendar.gcalFeed(

该地址用于订阅特定邮件服务的通知，请确保您的邮件客户端已正确配置相关功能

{

eidtable: true,

className: 'gcal-events',

//currentTimezone: 'Asia/Chongqing'

currentTimezone: 'Asia/Tokyo'

}

)

});

});

16. 总结:

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

16.2. 需要引入的文件:

<!—这种css可以根据具体情况设置为个性化风格. 约500行的css代码, 动改幅度不大. 核心目的是理清各部分之间的关联.

包括以下四个JS文件：它们都与jQuery UI相关。这些文件可能来自fullcalendar自带的资源库，或者从jQuery官方UI库中订阅一个适合个人使用的精简版本。这样就能获得一个选择性较强的、经过压缩处理后独立运行的JS文件。该版本在性能上有较高的提升

<js文件 type='text_js' src(‘../gcal.js’)>!