美文网首页Vue
FullCalendar V4 —— (2)日历属性

FullCalendar V4 —— (2)日历属性

作者: 章光辉_数据 | 来源:发表于2020-04-21 14:32 被阅读0次

    系列文章:

    1. FullCalendar V4 —— (1)安装插件
    2. FullCalendar V4 —— (2)日历属性

    下表整理自官方文档,便于查找。

    参数 默认值 含义
    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#ff0000rgb(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

    相关文章

      网友评论

        本文标题:FullCalendar V4 —— (2)日历属性

        本文链接:https://www.haomeiwen.com/subject/ebmuihtx.html