系列文章:
下表整理自官方文档,便于查找。
参数 | 默认值 | 含义 |
---|---|---|
defaultView | "dayGridMonth" | 默认视图。 |
header | { left:'title',center:'',right:'today prev,next' } | 在日历顶部定义按钮和标题,设置为 false 后将不显示标题 |
footer | false | 与 header 相似,设置日历底部的控件 |
titleFormat | 时区,每个视图都有特定的默认值,具体参照文档 | |
titleRangeSeparator | " \u2013 " | 确定标题(日期范围格式)中的分隔符文本 |
buttonText | { today: 'today', month: 'month', week: 'week', day: 'day', list: 'list' } | 按钮的文本映射 |
buttonIcons | { prev: 'left-single-arrow', next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow' } | 按钮的图标,仅当 themeSystem 是 'standard' 时会有影响。 |
customButtons | 在 header 或 footer 中设置自定义按钮,默认不设置 | |
themeSystem | "standard" | 主题,不同的主题可以设置不同的图标样式,可选 standard 或 bootstrap |
bootstrapFontAwesome | { close: 'fa-times', prev: 'fa-chevron-left', next: 'fa-chevron-right', prevYear: 'fa-angle-double-left', nextYear: 'fa-angle-double-right' } | 当主题是 bootstrap 时,在 header 或 footer 中的图标样式 |
height | 日历高度,包括 header 和 footer,默认不设置,日历高度由 AspectRatio 计算,该值可以设置为:整数、函数、"parent" 或 "auto" | |
contentHeight | 日历查看区域的高度(不包括 header 和 footer ),默认不设置,日历高度由 AspectRatio 计算,该值可以设置为:整数、函数或 "auto" | |
aspectRatio | 1.35 | 日历的宽高比,数字越大,日历越扁 |
handleWindowResize | true | 在浏览器窗口调整大小时,是否自动调整日历大小 |
windowResizeDelay | 100 | 窗口调整大小后,等待多久(毫秒)后日历再自动调整大小 |
weekends | true | 是否在任何日历视图中显示"星期六/星期日"列 |
hiddenDays | [] | 排除一周中的某些天,范围是0-6,其中0是星期天 |
columnHeader | true | 对于 Month , TimeGrid 和 DayGrid 视图,是否显示日期标题 |
columnHeaderFormat | 日历列标题上显示的文本格式,每个视图都有特定的默认值,具体参照文档。 | |
columnHeaderText | 以函数的形式生成字符串,用于日历列标题上的文本。 | |
columnHeaderHtml | 以函数的形式生 html 字符串,用于日历列标题上的文本。 | |
slotDuration | "00:30:00" | 时间轴的时间间隔长度,默认值为 00:30:00 (30分钟) |
slotLabelInterval | 时间轴的标签间隔,如果未指定,则会基于 slotDuration 值自动计算;如果指定值,需要给出如 "01:00" 或 {hours:1} 的格式 |
|
slotLabelFormat | { hour: 'numeric', minute: '2-digit', omitZeroMinute: true, meridiem: 'short' } | 在一个时间间隔内显示的文本,可以创建多层 |
minTime | "00:00:00" | 时间轴的开始时间 |
maxTime | "24:00:00" | 时间轴的结束时间 |
scrollTime | "06:00:00" | 确定滚动窗格最初被滚动到多远。 |
defaultDate | 日历加载的初始日期,如果不指定则显示今天。 | |
dateIncrement | 用户点击 prev 或 next 时,日期倒退或前进的步长。在标准视图里无需指定该参数值;在自定义视图里,duration 会被作为该参数值的默认值。 | |
dateAlignment | 指定自定义视图的第一个可见日期,如果未指定,则根据视图的持续时间自动生成。 | |
validRange | 限制用户可以导航到的、以及事件可以触达的最小日期和最大日期。 | |
navLinks | false | 日和周是否可点击 |
navLinkDayClick | 日的自定义点击事件,当设置后,将不会自动导航到任何视图 | |
navLinkWeekClick | 周的自定义点击事件,当设置后,将不会自动导航到任何视图 | |
weekNumbers | false | 是否显示周数 |
weekNumbersWithinDays | false | 周数是否显示在日期单元格里,默认不显示在单元格里,另起一列。 |
weekNumberCalculation | "local" | 设置显示的周数的计算方法,可选:local,ISO 或者自定义函数,其中 local 指由日历的语言环境设置确定, ISO 请参考维基百科并会将 firstDay 参数的默认值改为1。 |
weekLabel | "W" | 周数的标题文本,默认值根据当前的语言环境而变化 |
selectable | false | 允许用户通过点击或拖动来高亮多个日期或时间间隔(需加载 interaction 插件)。 |
selectMirror | false | 用户拖动时是否绘制“占位符”事件,此选项仅适用于TimeGrid视图。 |
unselectAuto | true | 在单击页面上的其他位置时,是否清除当前选择。仅当 selectable 设置为 true 时该参数有效。 |
unselectCancel | '' | 忽略 unselectAuto 参数效果的元素(们)。单击与该 CSS 选择器相匹配的元素时,防止清除当前选择,例如某个类是 "my-form", 则该参数值可以是 ".my-form"。 |
selectOverlap | true | 是否允许用户选择事件已经被占用的时间段(即允许用户多个事件有重叠的时间段),当设置为 true 时,每次用户的选择与事件香蕉时,都会调用一次该功能,若为 true 则允许选择。 |
selectConstraint | 将用户的选择限制在某些时间范围内,可选:事件的 groupId,"businessHours" 或者对象。该参数的行为与 eventConstraint 参数的行为相同,且允许一样的参数值。该参数只有在 selectable 为 true 时有效。 | |
selectAllow | 对用户可以选择的位置进行精确的编程控制,用户拖动时,将会为每个新的潜在选择调用次毁掉。参数值为函数 function(selectInfo)。 | |
selectMinDistance | 0 | 用户鼠标点击后必须经过的最小距离,0 不会限制,该设置仅适用于鼠标相关的交互,触摸相关交互参见 selectLongPressDelay 。 |
nowIndicator | false | 是否显示指示当前时间的标记。 |
now | 设置日历的“今天”日期,通常以黄色突出显示。 | |
businessHours | false | 在日历上强调某些时间段。参数值可以是布尔值:如果参数值为 ture ,则将强调默认的工作时间(周一~周五的上午9点到下午5点),如果为 false 则不强调。参数值可以是一个对象,以便于精细的控制;也可以是多个对象的数组。 |
businessHours | false | 在日历上强调某些时间段。参数值可以是布尔值:如果参数值为 ture ,则将强调默认的工作时间(周一~周五的上午9点到下午5点),如果为 false 则不强调。参数值可以是一个对象,以便于精细的控制;也可以是多个对象的数组。 |
events | [] | 事件对象的数组,对象的属性详见文档,所有属性都是可读的,需要使用动态操作的方法来修改。fullcalendar 提供了最基础的周期性事件,允许每天或每周的的重复事件,同时也允许使用 RRule 插件来扩展。 |
fixedWeekCount | true | 月视图里,是否总是显示6周,如果设为 false 则会根据当月实际情况显示4周,5周或6周。 |
showNonCurrentDates | true | 月视图里,是否显示上个月或下个月的日期,当设为 true 时会显示并淡化。 |
allDaySlot | true | 周视图里,全天事件是否显示在日历的顶部,当设为 false 时,全天事件将不显示。 |
allDayText | "all-day" | 周视图里,全天事件对应的时间轴标签 |
slotEventOverlap | true | 周视图里,是否允许事件在视觉上重叠:设为 true 时允许重叠,但最多只会遮挡一半;设为 false 不允许重叠。 |
timeGridEventMinHeight | null | 周视图里,事件的最小高度,如果未指定(默认值),则事件高度将由其 start 和 end 时间所决定(可能会出现因事件的时长太短,导致事件高度太小,事件在视觉上被压缩) |
listDayFormat | 列表视图中,设置日期标题左侧的文本(如星期一),如果设为 false , 则不显示任何文本。 | |
listDayAltFormat | 列表视图中,设置日期标题右侧的文本(如2020年4月20日),如果设为 false , 则不显示任何文本。 | |
noEventsMessage | "No events to display" | 列表视图中,当没有任何事件时显示的文本 |
resourceGroupField | 资源时间轴视图中,对资源进行分组的字段名,该参数必须是每个资源对象都具有的字段名。 | |
resourceGroupText | 资源时间轴视图中,资源组分隔符中显示的文本,该参数值也可以是一个函数,仅在指定 resourceGroupField 时生效 | |
resourceAreaWidth | "30%" | 资源时间轴视图中,资源列表区域的宽度 |
resourceLabelText | "Resources" | 资源时间轴视图中,资源列表区域上方的文本 |
resourceColumns | 资源时间轴视图中,将资源区域从简单的标题列表转换为数据网格,详见文档 | |
resourcesInitiallyExpanded | true | 资源时间轴视图中,加载视图时是否显示子资源,设为 false 时将折叠子资源(即最初的时候不可见) |
slotWidth | 资源时间轴视图中,每个时间轴插槽的宽度,该参数值可指定为多个像素(如"25px"),若不指定则将自动计算出一个合理值。 | |
dateAboveResources | false | 资源垂直视图中,水平方向上,日期是否显示在资源的上面(即是否按日期聚合) |
eventColor | 设置日历上所有事件的背景和边框的基础颜色,可以使用任何 CSS 颜色格式,如 #f00 ,#ff0000 ,rgb(255,0,0) ,或 red
|
|
eventBackgroundColor | 设置日历上所有事件的背景的基础颜色 | |
eventBorderColor | 设置日历上所有事件的边框的基础颜色 | |
eventTextColor | 设置日历上所有事件的文本础颜色 | |
eventTimeFormat | 设置日历上所有事件显示的时间文本,用法详见文档 | |
displayEventTime | 是否显示事件的时间文本,该参数仅适用于具有时间(allDay 为 false)的事件。 | |
displayEventEnd | true 或 false | 是否显示事件的结束时间,该参数设置后将作用于所有视图。默认情况下,不同视图对应着不同的默认值,详见文档。 |
nextDayThreshold | "00:00:00" | 第二天的阈值。在 dayGrid 视图中,对于某个跨天的事件是否要显示在第二天的单元格里,取决于该事件的结束时间是否比阈值大。 |
eventOrder | "start,-duration,allDay,title" | 事件的排列顺序,该参数可以是如默认值所示的字符串,也可以是函数或数组。若要降序则在条件前加 - 。 |
progressEventRendering | false | 是否单独地渲染多个异步事件源,默认为 false,即等待收到所有事件源后一次性渲染所有事件,减少渲染次数;设置为 true 则反之,会增加渲染次数。 |
editable | false | 允许用户编辑事件(通过拖动事件位置,或调整事件在日历上的高度) |
eventStartEditable | true | 允许用户拖动事件来修改事件的开始时间(及结束时间) |
eventResizableFromStart | false | 允许用户在事件的头部调整事件高度 |
eventDurationEditable | true | 允许用户通过调整事件的高度来更改时间的持续时间 |
eventResourceEditable | false | 允许用户在不同的资源之间拖动事件,该参数默认值等于 editable。 |
droppable | false | 允许用户将外部可拖动元素或其他日历中的事件放到日历上。 |
eventLimit | false | 限制一天中显示的事件数,可设置为整数或布尔值:默认为 false 即代表显示所有事件;设置为 true 则将根据日单元格的高度来自动限制事件数;设置为整数后,当事件太多时,将显示一个类似于“+2 更多”的链接,用户单击链接的操作由 eventLimitClick 决定。 |
eventLimitClick | "popover" | 确定用户单击 eventLimit 所创建的“更多”链接时的操作。可选:"popover"(在单元格上方显示一个矩形面板,包括当天的完整事件列表)、"week"(跳转到周视图)、"day"(跳转到日视图)、其他视图名称或者一个回调函数。 |
eventLimitText | "more" | 确定由 eventLimit 所创建的链接文本,可以指定字符串或函数,对于字符串,会根据超出数量在前面显示“+n”。 |
dayPopoverFormat | { month: 'long', day: 'numeric', year: 'numeric' } | 确定由 eventLimit 所创建的链接的弹出窗口的标题日期格式 |
resources | [] | 资源列表,列表元素为资源对象,对象属性详见文档 |
refetchResourcesOnNavigate | false | 当用户导航到其他日期或更改视图时,是否重新获取并渲染资源。 |
resourceOrder | 资源排列的顺序,默认升序,加 - 后为降序。多个排序条件之间用逗号隔开,如 '-type1,type2' |
|
filterResourcesWithEvents | false | 是否仅显示有关联事件的资源。 |
resourceText | 确定每个资源上显示的文本,该参数值为函数,并返回相应的字符串,若不指定该参数则会用资源对象的 title 字段。 | |
locale | 日历的语言环境设置,可以是字符串(如 zh-cn ),也可以是引入的组件(详见文档),建议用引入的方式来设置,否则会出现翻译不全的情况。 |
|
locales | [] | 语言环境数组,可用于加载多个语言环境并切换 |
dir | "ltr" | 日历中元素的呈现方向,ltr(从左到右)或 rtl(从右到左) |
firstDay | 0 | 每周的第一天,该值为 0 ~ 6 的整数,其中 0 是星期天,1 是星期1,…… |
timeZone | "local" | 时区,默认值 local 是指使用操作系统的时区,可选:local、UTC、时区(如中国是 Asia/Shanghai ) |
timeZone | "local" | 时区,默认值 local 是指使用操作系统的时区,可选:local、UTC、时区(如中国是 Asia/Shanghai ) |
网友评论