FullCalendar V4 —— （2）日历属性
2020-04-21 本文已影响0人
章光辉_数据
系列文章：
下表整理自官方文档，便于查找。
| 参数 | 默认值 | 含义 |
|---|---|---|
| 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 ） |
