FullCalendar是一个基于jQuery的日历插件，适用于各种日程、工作计划等场景。本文是fullCalendar官方文档的中文版，主要介绍fullCalendar的具体属性和方法，供大家参考。

1. 使用方式： 介绍完相关JS js，css，$ ('# div _ name ')。full calendar({//options })；接受选项对象。

2. 普通属性

2.1.年、月、日：整数，初始化加载的日期。

2.2.defaultView:字符串类型，默认为month

2.2.1.允许的视图：

2.2.1.1.月份页面显示一月，日历样式。

2.2.1.2.基本周显示一周的一个页面，没有特殊样式。

2.2.1.3基础日在一页上显示一天，没有特殊的样式。

2.2.1.4的一页。日程周显示一周，显示详细的24小时日程(即日程)。

2.2.1.5.议程日在一页上显示一天，显示详细的24小时日程。

2.3.header:定义按钮/文本在日历的顶部。false表示不使用页眉，布局使用左、中、右三个属性。默认值为{left:' title '，center:' '，right:' today prev，next'}。支持的属性按钮：

2.3.1.标题：包含当前日期的文本。

2.3.2.prev:根据不同的视图，返回到上一个月/周/日。

2.3.3.下一步：根据不同的视图，返回到下个月/周/日。

2.3.4.prevYear:让日历回到前一年。

2.3.5.nextYear:将日历返回到下一年。

2.3.6.今天：将日历移动到当天。

2.3.7.视图名称：上面列出的受支持的视图名称用于切换视图。

2.4.buttonText:定义标题中使用的按钮的显示文本：接受的属性名称：prev、next、prevYear等。

2.5.aspectRatio:接受一个浮点参数并调整纵横比。

2.6.allDayDefault: Boolean类型，默认为true，决定每个CalEvent的allDay属性的默认值。allDay表示计划事件是否是一整天，即忽略具体时间，只计算天数。默认情况下，所有新添加的计划时间都是全天。通过设置allDayDefault，新创建的计划时间将默认以时间为中心。

2.7.weekends: Boolean类型，默认值为true，标识是否显示周六和周日的列。

2.7.1.固定：每月固定展示6周。

2.7.2.液体：可能会显示4、5、6周，具体视月份而定，每一周的高度会被拉伸以填充可变高度。根据不同的比例，一个月的高度在这里是固定的。

2.7.3.可变：可能显示4、5和6周。根据月份的不同，每个星期的高度会有一个固定值，即整个月的高度会随着几个星期的行数而变化。

2.8.allDaySlot:布尔值，默认值为true，表示上述全天磁贴是否以议程视图模式显示。

2.9.allDayText:全天区域的文本内容。

2.10.firstHour:整数，默认值为6。意思是在agenda的视图中，第一次打开时显示第n个小时，表格由scroll控制。

2.11.slotMinutes:整数，默认值为30，表示两次查看日程的时间间隔。即没有小时所在的线中的每一条小线代表多少分钟。

2.12.defaultEventMinutes:整数，默认值为120，与事件有关，作用不确定。

3. 日程编辑

3.1.editable:布尔值，默认值为false，用于设置日历中的日程是否可以编辑。可编辑意味着可以移动、调整大小等。

3.2.disabled raging:Boolean类型，默认为false，所有事件都可以拖动，并且必须可编辑=true。

3.3.diableResizing: Boolean，默认为false，所有事件都可以调整大小，并且必须是editable=true。

3.4.dragRevertDuration:拖动恢复时间，默认为500ms，表示拖动不成功后控件回到原来位置的时间。

3.5.dragOpacity: Float类型，表示拖动时的不透明度。指定一个浮点值，指示所有视图都使用此不透明度，或者将其分配给一个对象，并通过views hash指定特定视图的不透明度。当通过views hash指定对象的不透明度时，可以指定它的一部分，然后使用“”:float for others来指示所有其他视图。

3.5.1.月

3.5.2.周：基础周和阿根达周

3.5.3 .日：基准日和议程日

3.5.4.议程：议程日和议程周

3.5.5.议程日期

3.5.6.阿根达韦克

3.5.7.基本：基本周和基本日

3.5.8.基本周

3.5.9.基本日

3.5.10.“”:指示所有其他视图的空字符串

4. 时间和日期的格式化

4.1.支持的格式占位符

4.1.1.斯：秒

4.1.2.ss:秒，两位数

4.1.3.男：分钟

4.1.4.分钟，两个人

4.1.5.小时，12小时制

4.1.6.hh:小时，12小时制，两位数

4.1.7.小时，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.月份号，两位数。

4.1.15.嗯：月份名称，缩写

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:确定页眉中标题显示日期的格式。在这里，您也可以使用view hash的方法通过对象对其进行配置。如果使用视图哈希的方法来配置，每个视图中标题的格式会有所不同。

4.3.columnFormat: string/object，其配置方式与titleFormat相同，影响各种视图中每列标题中显示的文本。文件中对allDay是假的解释不清楚。

4.4.时间格式：默认为{agenda:' h: mm {-h: mm}}，影响添加的具体日程上显示的时间格式。

4.5.axisFormat: string，默认h(:mm)tt，它影响议程视图下最左侧列的时间显示模式。

4.6.视图散列：现在支持视图散列的选项有：dragopacity、标题格式、列格式和时间格式。

5. formatDates:$ . full calendar . formatdates(date 1，date2，formatstring，[options]):类似于format date，但接受两个日期。在格式字符串中，使用{…}设置第二个日期的格式。

6. Event sources:

6.1.事件：数组/字符串/函数：

6.1.1.配置事件源

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

6.1.1.2.提供一个返回json或计划事件数组的URL。GET参数取决于startParam和endParam的选项。

6.1.1.3.提供以自定义方式捕获数据的功能。该函数需要接受参数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获取事件的数据源时自动插入URL的参数，表示当前要捕获的日程事件的开始时间。

6.4.endParam: string，默认值：end，与startParam参数含义相同，表示要抓取的调度事件的结束时间。

6.5.cacheParam:使用JSON url获取schedule事件时，为了防止ajax自带缓存导致的数据不同步，增加的认证参数的名称和值由full calendar控制。如果不知道，可以查询ajax缓存解决方案。

7. CalEvent对象:标准的当前使用的日程事件源(请注意这里的日程事件和计算机领域的事件的区别，计算机领域的事件是业务，表示在某个时间做某事的记录，而计算机领域的事件是用户在计算机上的一个动作)

7.1.id: Integer/String:计划事件的id。重复计划事件具有相同的ID。

7.2.标题：字符串，计划事件的标题。

7.3.allDay: Boolean，默认值为true，表示计划事件是否与特定时间有关。如果为真，则表示日程事件不关注具体时间，一天中的任何时间都可用。因此，日程事件的日期将被忽略，并显示在议程视图的特殊全天区域中。如果为false，则表示关注开始时间和结束时间。

7.4.日期：日期类型，它是开始属性的别名。

7.5.start: Date类型，一个JavaScript日期对象。为了方便起见，可以用IETF格式、ISO8601格式和UNIX时间戳的字符串来表示。

7.6.end: Date(可选):与start相同，但它表示计划时间的结束时间。

7.6.1.如果对应的日程事件是allDay，那么10月1日8: 00到10月3日8: 00意味着跨度为3天。

7.6.2.如果对应的计划时间不是全天，那么10月1日8: 00和10月3日8: 00意味着跨度是48小时。

7.6.3.url: string，设置一个url，当这个schedule事件被点击时会用到，默认会在当前窗口打开一个新页面。如果使用更复杂的事件处理，您应该使用eventClick来触发操作。(本文档中使用触发的操作来描述计算机字段中的事件，这可以防止与插件所在域中的计划事件发生冲突。)

8. 方法:方法调用模式：$('。选择器)。fullCalendar ('method _ name ')首先使用一个jQuery选择器获取日历控件对象，然后调用fullCalendar()，参数是字符串形式的方法名。

8.1.prev，跳到上个月/周/日，根据当前视图决定

8.2.下一个，和上一个一样，是下一个月/周/日。

8.3.今天，跳到今天。

8.4.gotoDate:调用方法：$('。选择器)。full Calendar(' gotote '，Year [，month [，Date]])调用名为gotote的方法，后三个参数传递年、月、日、年，这三个参数是必需的，另外两个是可选的。其中，月份参数，计算从0开始，也就是说一月对应0。也可以用单个参数调用该方法来传递javascript日期对象。

8.5.增量日期：$('。选择器)。完整日历('增量日期'，年[，月[，日]])以当前时间为轴，将日历向前或向后移动指定的时间长度，例如：$('。选择器)。完整日历('增量日期'，-3，2，-5)表示将日历年向前移动3年，将月份向后移动2个月，以及day(天数？呵呵)往前走5天。

8.6.Changeview: $('。选择器)。完整日历(' Changeview '，viewname)切换日历的视图，并且viewname必须是允许的视图。

8.7.更新事件：$('。选择器)。完整日历('更新事件'，CALEVENT)更新日历空间中的计划事件。如果是重复计划事件，则更新。此处更新的CalEvent对象必须是在Triggered Action中作为参数传递或在clientEvents方法中返回的calEvent实例，这意味着它在日历中必须是合法的和可检索的。

8.8.RenderEvent: $('。选择器)。Full Calendar ('RenderEvent '，Calevent，[stick])在日历中呈现一个新的CalEvent对象，该对象必须至少具有title和start属性。默认情况下，当日历重新获取日历事件源(如prev或next call)时，新呈现的CalEvent对象将消失。如果stick参数设置为true，新渲染的CalEvent对象将永远保留。

8.9.RemoveEvents: $('。选择器)。完整日历(' RemoveEvents '，[Idorfilter]):从日历中删除计划事件。第二个参数可以留空，用id填充，并且可以是一个过滤器(一个接受CalEvent对象作为参数的函数)

8.9.1.不要填写：所有日历事件都将被删除。

8.9.2.id:删除具有指定id的所有计划事件。

8.9.3.Filter:过滤器接受CalEvent对象作为参数。在过滤器中，通过一些策略对其进行处理。如果需要删除，则返回true否则，它返回false。

8.9.4.ClientEvents: $('。选择器)。FullCalendar ('ClientEvents '，[Idorfilter]):返回FullCalendar存储在客户端中的CalEvents对象的数组。第二个参数与removeEvents方法的第二个参数具有相同的含义，只是在筛选器中，如果为true，CalEvent对象将被添加到返回的数组中。

8.9.5.添加事件源：$('。选择器)。FullCalendar ('AddEvent Source '，Source):添加一个日历事件源。添加后，Full Calendar将立即从该源获取日历事件，并将其加载到日历中。第二个参数与定义日历时使用的url参数一致。

8.9.6.删除事件源：$('。选择器)。完整日历('删除事件源'，源)删除计划事件源，从该源获得的计划时间将立即从日历中删除。

8.9.7 .重新呈现事件：$('。选择器)。完整日历(“重新呈现事件”)在屏幕上重新呈现所有计划事件。

8.9.8.重新提取事件：$('。选择器)。完整日历(“重新提取事件”)重新获取计划事件源上的所有计划事件并呈现它们。

8.9.9.render: $('。选择器)。fullCalendar ('render '):这个方法用于一次呈现整个日历。当在可见元素上调用FullCalendar时，它将被自动调用。如果在隐藏的元素上调用它，需要尽快手动调用它，使元素可见并呈现。

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

9.1.视图显示：功能(视图).每次加载日历和更改日历视图时都会触发该事件。接受的视图是与前面提到的视图相对应的对象。

9.2.加载：函数(isLoading，view).当日历开始加载时，如果isLoading参数为true，则触发一次，如果日历完成加载，则触发一次，如果isloading参数为false，则触发一次。

9.3.windowResize:当calendar控件的大小由于包含日历的窗口大小的改变而改变时，触发函数(view)。(不清楚这个方法中的this变量指向哪个元素，因为改变我的浏览器大小并没有导致日历大小改变。)

9.4.day Click (dayDate，All day，JS Event，View):当用户点击day时触发。日日期是点击日的时间(包括日程视图中的时间)。当点击月视图下的某一天时，allDay为真。在议程模式下，当你点击全天的窄栏时，allDay为真，在其他议程视图下点击当天为假，jsEvent是一个普通的javascript事件，包含了点击事件的基本信息。在这个方法中，它获取一个普通的HTML DOM元素，这是一个包含日期的TD。

9.5.事件呈现：function (calEvent，element，view):日历事件呈现前触发。calEvent是日历事件对象，element是CalEvent对象对应的JQuery对象，view是当前视图的实例对象。在此方法中，关键字this用于获取calEvent对象的引用。如果此事件的处理方法返回false，则可以阻止所有日历事件的呈现。在这种方法中，可以通过修改jquery对象元素来改变具体的渲染方式，因此可以很好地与其他插件结合。

9.6.eventClick，eventmouseover，event mouseout:function(calevent，js event，view):日程事件被点击，鼠标经过，鼠标离开的事件。参数与上面介绍的同名参数相同。如果此处的eventclick事件返回false，您可以防止浏览器跳转到相应计划事件的初始配置中指定的url地址。要防止此事件的传播，请参考有关事件传播和原始响应的DHTML文档。

9.7.EventdragStart，EventdragStop:function(calevent，jsevent，UI，view)调度事件在拖动前后触发。这里的阻力不一定是有效阻力。只要拖动schedule事件的控件，就会触发该事件。同名参数与上述参数相同。UI存储JQuery的UI对象。你可以从这个物体得到位移、位置等数据。

9.8.事件删除：函数(Calevent、日增量、分钟增量、全天、恢复函数、JS事件、UI、视图)在一个计划事件中移动，并成功移动到另一个日期/时间。

9.8.1.dayDelta:保存日历事件由于这种拖动而移动的天数，向前的数字为正数，向后的数字为负数。

9.8.2.minuteDelta:保存此调度事件由于此拖动而移动的分钟数，正向向前，负向向后。该值仅在议程视图下有效。

9.8.3.allDay:如果移动到月视图或议程视图下的全天区域，allDay为真，而移动到议程视图的其他区域为假。

9.8.4.revertFunc:调用此方法将以前的拖动恢复到原始状态。这种方法主要用于ajax提交。移动后，数据被提交到后台。如果后台更新失败，根据返回消息调用此方法将页面恢复到原始状态。

9.8.5.EventreSizeStart，EventreSizeStop:function(calEvent，JSEvent，UI，view):在schedule事件改变大小前后发生(不一定要改变成功。)Calevent保存计划事件信息(日期、标题等)。)

9.8.6.event resize:func(calevent，daydelta，minute delta，revert func，jsevent，UI，view):在调度事件改变大小并成功后调用，参数用法与eventDrop参数一致。

10. View 对象

10.1.名称：上面列出的视图名称。

10.2.title: string:切换到视图时可以在标题中设置的title变量的值。

10.3.start:日期类型，此视图下的第一天。

10.4.end:日期类型，此视图下的最后一天。因为它是一个封闭值，例如，在月视图下的十月，那么end应该对应于十一月的第一天。

10.5.visStart:日期类型。在这种观点下，第一个无障碍日。月视图下，这个值是一个月的第一天，在周视图下，通常与start一致。

10.6.visEnd:日期类型，可访问的最后一天

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

11.1.示例1:fc-事件。fc-议程。fc-事件时间。fc-事件a {

背景色：黑色；/*背景颜色*/

边框颜色：黑色；/*边框颜色(通常与背景色相同)*/

颜色：红色；/*文本颜色*/

}

11.2.示例2。假期。fc-议程。假期。fc-事件时间。假日a {

背景色：绿色；/*背景颜色*/

边框颜色：绿色；/*边框颜色(通常与背景色相同)*/

颜色：黄色；/*文本颜色*/

}

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

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

12.2.buttonIcons: Object，改变标题中使用的prev，next等变量对应的按钮样式。默认样式是：

{

上一页：'圆形-三角形-w '，

下一步：“圆形-三角形-e”

}

13. 本地化选项：

13.1.firstDay:整数类型，默认值为0。一周的第一天是星期几？周日是0，周一是1，依此类推。

13.2.monthNames: Array，用于表示月份全名的字符串。默认情况下，它是英文月份的全名。

13.3.monthnameshort:Array，用于月份缩写的字符串，默认为英文月份名称缩写。

13.4.dayNames: Array，用于表示一周全名的字符串。默认情况下，它是英文的星期全称。

13.5.dayNamesShort: Array，用于星期缩写的字符串。默认为英文星期名称的缩写。

13.6.在最初的2.4和2.9中已经引入了buttonText和allDayText。

14. 日期工具

14.1.format date:$ . full calendar . format date(date，formatstring [，options])，按指定格式格式化日期，并返回一个字符串。Options选项是在其中设置本地化变量的受支持属性值的对象。例如{monthNames: [' '一月'，'二月'，…]，日名

14.2.一次格式化两个日期：$ . full calendar . format date(date 1，date2，formatString [，options]):与前面的格式化日期类似，只是formatString中使用了花括号{…}来描述第二个日期的格式。

14.3.解析日期：$ . full calendar . parse Date(string):将字符串格式化为javascript date对象。该字符串可以有三种格式：ISO 8601、IETF和UNIX时间戳。

14.4.解析ISO8601:$ full calendar . parse ISO8601(string[，ignore timezone])将ISO8601字符串转换为javascript Date对象。

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

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

5.2.Events: $ .fullcalendar.gcalfeed('自己的google日历的feed地址'，{editable: false，类名：' gcal-events '，当前时区：'自己在google日历上设置的时区' })。因此，你可以在谷歌日历上用你自己的应用程序连接你自己的日程表。

15.3.下面是我自己关联自己的google日历的代码：

$(文档)。ready(function() {

$('#calendar ')。完整日历({

default view:“agenda week”，

事件：$.fullCalendar.gcalFeed(

' http://www . Google . com/calendar/feeds/LGG 860911 @ Yahoo . com . cn/private-184462 b 11481 a 96 cf 9835 fbb 6486 DBE 6/basic '，

{

eidtable:对，

类名：“gcal-事件”，

//currentTimezone:'亚洲/重庆'

当前时区：“亚洲/东京”

}

)

});

});

16. 总结：

6.1.使用时，下载发布版，不要下载开发版。

16.2.要介绍的文件：

这个css可以根据自己的情况修改成自己喜欢的样式。500行css，修改量不是很大。主要是理清关系。

link rel='样式表' type='text/css' href='./fullcalendar.css' /

脚本类型='text/javascript' src='./jquery/jquery.js'/script

以下四个js文件是与jquery-ui相关的包。可以使用fullcalendar自带的包，也可以去jquery的官方ui库订阅一个适合自己使用的min版本。这样，您将获得一个单独的js文件，该文件被选中并被压缩。效率比较高。

脚本类型='text/javascript' src='./jquery/ui.core.js'/script

脚本类型='text/javascript' src='./jquery/ui . draggable . js '/script

脚本类型='text/javascript' src='./jquery/ui . resizable . js '/script

脚本类型='text/javascript' src='./full calendar . min . js '/脚本

17. 主要概念：

17.1.calendar:整个calendar控件的div，也就是我们的$ ('# calendar ')。FullCalendar是这样使用时带有日历id的容器。

7.2.日程事件：某个日程记录，例如：2009年11月16日星期一11: 11: 11: 11，111毫秒。事件标题是：“jb51，某某工作要做。”

7.3.触发动作：Jquery封装的javascript事件…

7.4.jsevent:最初的javascript事件。

17.5.由于javascript是一种动态语言，对于calEvent对象或其他任何对象，如果你想保存一些数据，你可以直接设置它。比如你想在calEvent里保存女朋友的名字，用calevent.girl _ friend _ name='美少女'就可以了，用的时候直接就可以得到了…用的时候最好这样用：my _ girl _ friend _ name=calevent . girl _ friend _ name | | |“又一个美少女”；这样，当你保存在calEvent中的女朋友由于某个中间操作而丢失，或者你根本没有保存，自己还不知道的时候，你可以再得到一个漂亮的姑娘，以免一无所获，甚至引起一些不必要的麻烦(浏览器上警告你试图调用一个未定义对象的属性)。

18. 领域模型:根据我自己的理解，希望能帮助你理解进度管理的概念。

以上是FullCalendar插件的官方中文描述文档。实际操作可以查看JS日程管理插件FullCalendar的简单例子。

参考文献：

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。