npm 包 my-vue-fullcalendar 使用教程

阅读时长 33 分钟读完

简介

my-vue-fullcalendar 是一个基于 Vue.js 框架开发的日历组件，具有独特的样式和丰富的功能，可用于展示日程安排、活动安排、会议安排等。本文将详细讲解如何使用该组件，以及如何自定义样式和功能。

安装

npm 安装：

Vue 单文件组件使用：

-- -------------------- ---- -------
----------
  ----------------- --------------------------------------
-----------

--------
------ -------------- ---- ----------------------

------ ------- -
  ----------- -
    ------------------- ---------------
  --
  ----- ---------- -
    ------ -
      -------- -
        -- ----
      --
    --
  --
--
---------

参数

my-vue-fullcalendar 组件接受以下参数：

参数 类型 默认值 描述
options Object {} 配置参数对象，详见下方
events Array<object> [] 事件列表，每个事件对象应包含 id、title、start 和 end 属性，start 和 end 属性应为 Date 对象或符合 YYYY-MM-DD 格式的字符串。
locales Object {} 国际化语言对象，应包含所有使用的语言，key 为语言编码（如 en），value 为对应语言的配置。
customClassGenerator Function (start, end, locale, abbreviate) => [] 自定义生成日期单元格 class 名称的函数，start 和 end 分别为单元格开始和结束的 Date 对象，locale 为当前语言配置，abbreviate 是否缩写月份。
customRenderer Function (h, events) => h('div', 'Custom render') 自定义渲染日历组件的函数，第一个参数为 Vue.js 官方提供的 h 函数，第二个参数为当前展示的事件列表。
disabledDates Array [] 禁止选择的日期列表，每个日期应为 Date 对象或符合 YYYY-MM-DD 格式的字符串。
defaultDate Date/String new Date() 日历默认展示的日期
disabledWeekdays Array<number> [] 禁止选择的星期列表，从 0 开始编号，即星期日为 0，星期六为 6。
direction String 'ltr' 日历展示的文字方向，ltr 表示从左向右，rtl 表示从右向左。
firstDay Number 0 一周从星期几开始，从 0 开始编号，即星期日为 0，星期六为 6。
header Object {left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay'} 日历头配置，可通过修改 left、center、right 三个属性的值来自定义头部布局。
height String 'auto' 日历高度，可以是像素值或百分比值。
slotDuration String '00:30:00' 每个日历时段的持续时间，以小时:分钟:秒数的格式表示。
theme Object {} 主题配置对象，详见下方。
timeZone String 'local' 日历使用的时区，可以是 'local' 或符合 IANA 时区标准的时区字符串。
validRange Object {start: null, end: null} 允许选择的日期范围，start 和 end 属性应为 Date 对象或符合 YYYY-MM-DD 格式的字符串。
viewDisplay Function noop 日历视图切换的回调函数，接受当前展示视图的名称 view、当前展示视图的开始时间 start 和结束时间 end 三个参数。
viewRender Function noop 日历视图渲染完成的回调函数，接受当前展示视图的名称 view 和当前展示视图的 element 两个参数。
weekendDays Array<number> [0, 6] 周末的星期列表，从 0 开始编号，即星期日为 0，星期六为 6。
windowTop Number 0 日历可视区域顶部离窗口顶部的距离。
windowResize Function noop 日历大小变化时的回调函数，接受当前窗口大小 newSize 和上一次窗口大小 oldSize 两个参数。

options 参数详解

参数 类型 默认值 描述
aspectRatio Number 1.35 日历视图宽度与高度的比例。
allDayDefault Boolean true 是否默认将事件添加到全天事件列表中。
allDaySlot Boolean true 是否在日历顶部添加全天事件的时间轴。
allDayText String '全天' 全天事件的默认显示文本。
axisFormat String 'h(:mm)t' 坐标轴时间的格式。具体格式含义详见 http://momentjs.com/docs/#/displaying/format/
businessHours.end String '18:00:00' 工作时间结束的时间点。
businessHours.start String '09:00:00' 工作时间开始的时间点。
buttonText.next String 'next' 日历头部下一个按钮的文本。
buttonText.prev String 'prev' 日历头部上一个按钮的文本。
buttonText.prevYear String 'prev year' 日历头部上一年按钮的文本。
buttonText.nextYear String 'next year' 日历头部下一年按钮的文本。
buttonText.today String 'today' 日历头部今天按钮的文本。
columnFormat String 'ddd' 日历列标题的格式。
columns Number 1 日历中每行列数。
dayClick Function null 单击日期单元格时触发的回调函数，接受日期 date, 视图名称 viewName 和时间块中的DOM元素 jsEvent 三个参数。
defaultView String 'month' 日历默认展示的视图名称。支持 'month'、'agendaWeek'、'agendaDay'、'basicWeek' 和 'basicDay' 五种视图。
dragOpacity Number 0.75 拖动事件时的不透明度。
dragRevertDuration Number 500 拖动事件时返回原始位置的动画持续时间。
dragScroll Boolean true 拖动事件时是否自动滚动。
dragStart Function null 开始拖动事件时触发的回调函数，接受 事件对象eventData 和 DOM 元素 jsEvent 两个参数。
dragStop Function null 停止拖动事件时触发的回调函数，接受 事件对象 eventData 和 DOM 元素 jsEvent 两个参数。
droppable Boolean false 是否接受拖入事件。
drop Function null 拖入事件时触发的回调函数，接受 日期 date、元素 jsEvent、数据对象 ui 和事件对象 event 参数。
dropAccept String '*' 拖入事件的可接受类型。
dropEvent Function null 将事件拖入视图时的回调函数，接受元素 jsEvent 和数据对象 ui 两个参数。
dropOpacity Number 0.75 拖入事件时的不透明度。
eventAfterAllRender Function null 事件渲染完成后触发的回调函数。
eventAfterRender Function null 渲染事件时触发的回调函数，接受事件对象 event 和 DOM 元素 element 两个参数。
eventAllow Function function(callback) { callback(true); } 自定义验证可拖动事件是否可放置的函数，接受事件对象 event、起始日期 start、终止日期 end 和回调函数 callback 四个参数。
eventBackgroundColor String '' 时间块背景色。
eventBorderColor String '' 时间块边框颜色。
eventClick Function null 点击事件块时触发的回调函数，接受事件对象 event 和 DOM 元素 jsEvent 两个参数。
eventColor String '' 事件默认颜色。
eventConstraint Object {} 事件约束条件。
eventDataTransform Function identity 数据点的变换函数。
eventDestroy Function null 销毁事件块时触发的回调函数，接受 事件对象 event 和 DOM 元素 jsEvent 两个参数。
eventDrop Function null 事件拖动完成后触发的回调函数，接受 拖动后的事件对象 event、拖动后的起始日期 start、拖动后的终止日期 end 和 原所在 cell 对象 jsEvent 四个参数。
eventDurationEditable Boolean true 事件持续时间是否可编辑。
eventEditable Boolean true 事件是否可编辑。
eventAfterStartEditable Function null 事件开始后是否可编辑的回调函数，接受参数 event 和布尔值 editable 两个参数。
eventLimit Boolean false 事件块是否合并显示。如果为 false，则事件块显示在当前日期单元格中，如果为 true，则在日历顶部使用“+n more”显示剩余事件数量。
eventLimitClick String 'popover' 当 eventLimit 为 true 时点击“+n more”链接时展示事件的方式。'popover' 表示弹出框展示，'week' 表示将视图切换到周视图。
eventLimitText Function null 当 eventLimit 为 true 时“+n more”链接的文本函数。精度默认是“n”。接受一个整数作为参数。
eventMouseover Function null 鼠标移到事件块上时触发的回调函数，接受 事件对象 event、DOM 元素 element 和鼠标事件 jsEvent 三个参数。
eventMouseout Function null 鼠标从事件块移开时触发的回调函数，接受 事件对象 event、DOM 元素 element 和鼠标事件 jsEvent 三个参数。
eventOverlap Boolean true 事件是否可重叠。
eventRender Function null 渲染事件块时触发的回调函数，接受 事件对象 event、DOM 元素 element 和完整日历中的数据对象 view 三个参数。
eventResizableFromStart Boolean false 事件是否从开始位置开始缩放。
eventResize Function null 事件调整大小结束后触发的回调函数，接受 长度 delta 和原始事件对象 event 两个参数。
eventResizeStart Function null 开始调整事件大小时触发的回调函数，接受 事件对象 event 和尺寸大小 jsEvent 两个参数。
eventResizeStop Function null 停止调整事件大小时触发的回调函数，接受 事件对象 event 和尺寸大小 jsEvent 两个参数。
eventSourceFailure Function null 数据源出错时触发的回调函数。
eventSourceSuccess Function identity 数据源返回成功时的变换函数。
eventStartEditable Boolean true 事件开始时间是否可编辑
eventTextColor String '' 事件文本颜色。
events Array [] 事件列表。
eventDataTransform Function identity 数据点的变换函数。
firstHour Number 6 日历中每天的第一个可见小时。
fixedWeekCount Boolean true 是否始终显示特定行数。
headerDropdownSymbol String '&#9660;' 下拉列表的符号。
handleWindowResize Boolean true 是否处理 window.resize 事件。
isRTL Boolean false 是否启用右到左阅读模式。
lazyFetching Boolean true 是否懒加载数据点。
loading Function null 日历加载时显示的回调函数，接受 布尔值 isLoading 和 DOM 元素 view 两个参数。
maxTime Moment null 最大可选时间。
minTime Moment null 最小可选时间。
nextDayThreshold Moment '09:00:00' 一天的结束时间，此时应将下一天的事件计入当前日期。
noEventsMessage String '暂无事件' 没有事件时的提示信息。
overheadThreshold String '0.5' 当时间块超过单元格的一定比例时，使用半透明样式展示。
timezone String new Date().getTimezoneOffset() 日历使用的时区。
timeFormat String 'h(:mm)t' 时间格式。具体格式含义详见 http://momentjs.com/docs/#/display

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005696581e8991b448e4d2d

纠错
反馈
相关推荐
精选内容