简介
my-vue-fullcalendar 是一个基于 Vue.js 框架开发的日历组件，具有独特的样式和丰富的功能，可用于展示日程安排、活动安排、会议安排等。本文将详细讲解如何使用该组件，以及如何自定义样式和功能。
安装
npm 安装：
--- ------- ------------------- ------
Vue 单文件组件使用：
----------
----------------- --------------------------------------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
----------- -
------------------- ---------------
--
----- ---------- -
------ -
-------- -
-- ----
--
--
--
--
---------参数
my-vue-fullcalendar 组件接受以下参数：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| options | Object | {} |
配置参数对象，详见下方 |
| events | Array | [] |
事件列表，每个事件对象应包含 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 | [] |
禁止选择的星期列表，从 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 | [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 | '▼' |
下拉列表的符号。 |
| 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