Vue 中好用的日历日程插件FullCalendar使用指南
博主wx: -GuanEr-
,加博主进前端交流群
参考资料链接:
功能: 实现 PC 端日历及日历中添加事件提醒。
本文极尽所能找到了常用功能的设置,并不是全部功能,想要查看特别完成的文档,请移步官网。
一、版本和基本介绍
1.1 版本
Vue:2.6.10
Vue-cli: 3.x
@fullcalendar/vue: 5.5.0 FullCalendar 从4.x 开始支持 Vue
1.2 形态
FullCalendar 就视图效果而言,提供的日历形态有以下几种
1.2.1 月视图
1.2.2 日网格视图
1.2.3 以时间和天为单位渲染
1.2.4 以日程(事件)为单位渲染
这是基本的渲染形式,我们可以通过 FullCalendar 预设的参数,配置我们想要的功能,获取我们想要的数据。 比如日历中日程的添加,修改,删除,日历的范围设置,标题设置,按钮设置等等。
二、安装和使用
2.1 在 Vue 项目中安装 FullCalendar
为了让日历插件在 Vue 中用起来更便捷,FullCalendar 将日历拆成了小插件,用哪个功能,安装哪个功能,不使用的话可以不安装。
以下是常见工具列表。
npm i @fullcalendar/vue --save
# FullCalendar 核心包,包含 calendar 类
npm i @fullcalendar/core --save
# 在月视图或日视图中操作事件工具包
npm i @fullcalendar/daygrid --save
# 在时间段视图中操作事件工具包
npm i @fullcalendar/timegrid --save
# 以列表的形式查看事件工具包
npm i @fullcalendar/list --save
# 交互包,提供事件拖放,调整大小,日期单击和可选择操作的功能
npm i @fullcalendar/interaction --save
# 为日历引入 bootstrap 4 的主题
npm i @fullcalendar/bootstrap --save
点此查看 FullCalendar 为 Vue 提供的所有插件列表
2.2 在 Vue 项目中使用 FullCalendar
利用 FullCalendar 封装一个自定义组件
<!-- my-calendar.vue -->
<template>
<div class="my-calendar">
<FullCalendar
ref="myCalendar"
:options="calendarOptions"
/>
</div>
</template>
<script>
// 引入已经安装好的,项目中所需要的 FullCalendar 插件
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
name: "my-calendar",
components: {
FullCalendar
},
data() {
return {
// 日历配置参数,在 三、参数 中有详细介绍
calendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
}
}
}
}
</script>
// main.js
// ...其他的配置
// 全局注册 my-calendar
import MyCalendar from '../../components/common/my-calendar'
Vue.component('my-calendar', MyCalendar);
注册好了之后就可以在任意组件中用 <my-calendar />
调用日历组件。
三、参数
3.1 fullcalendar 的 options 属性
FullCalendar
组件的 options
属性是一个对象,详细信息如
3.1.1 普通常见显示设置
属性 | 类型 | 描述 | 示例设置 | 效果 |
---|---|---|---|---|
locale | string | 默认值:en 设置语言格式 进入网页选择菜单 Locales 查看所有可设置语言 | / | / |
initialView | string | 默认值:dayGridMonth 日网格视图,即月视图 设置日历的默认渲染形式 | timeGridWeek | / |
headerToolbar | object | 默认值:{ left: 'title', center: '', prev: 'next' } 设置日历头部按钮群的操作内容,比如是否存在前一年,后一年的按钮,是否需要当天焦点按钮等等 | { left: 'prevYear, prev title next, nextYear today', center: '', right: 'dayGridMonth' } | |
firstDay | number | 默认值:7 设置一周中展示的第一列是星期几 | 3 | |
weekends | boolean | 默认值:true 是否在日历中显示周末 | / | / |
height | string | 设置日历的高度,包括header日历头部,默认未设置,高度根据aspectRatio值自适应。 | 600px | / |
contentHeight | string | 设置日历主体内容的高度,不包括header部分,默认未设置,高度根据aspectRatio值自适应。 | 540px | / |
aspectRatio | number | 默认值:1.35 日历单元格宽高比 | 2 | / |
buttonText | object | 设置按钮文本内容 | { today: '当天', prev: '前' } | / |
weekNumbers | boolean | 默认值:false 是否在日历中显示周次(一年中的第几周),如果设置为true,则会在月视图的左侧、周视图和日视图的左上角显示周数。 | true | |
navLinks | boolean | 默认值:false 是否显示天链接(从日历天的网格天链接中点进去,可以查看当天的所有内容详情) | true | |
handleWindowResize | boolean | 默认值:true 是否随浏览器窗口大小变化而自动变化。 | / | / |
eventColor | string | 默认值:#3a87ad 日历中事件的默认背景色颜色,优先级低于添加事件时设置的背景色 | #3a79eb | |
eventTextColor | 默认值:#fff 日历中事件的默认文本颜色,优先级低于添加事件时设置的文本色 | #000 | ||
dayMaxEvents | boolean | 默认值:true 时间中网格内容高度超出单元格高度时,是否折叠,如果选择false,则会完全展开网格内容,并自动撑开日历单元格高度 | true |
3.1.2 普通常见操作设置
属性 | 类型 | 描述 |
---|---|---|
editable | boolena | 事件是否可以进行拖动,缩放修改,优先级低于添加事件时设置的值 |
eventStartEditable | boolean | 事件开始时间是否可拖动修改,优先级低于添加事件时设置的值 |
eventDurationEditable | boolean | 事件结束时间是否可拖动修改,优先级低于添加事件时设置的值 |
selectable | boolean | 是否允许用户通过单击或拖动选择日历中的对象,包括天和时间。 |
defaultEventMinutes | number | 默认值:120 事件默认的时间执行长度,如果事件对象没有指定执行多长时间,则默认执行两个小时 |
selectMinDistance | number | 拖动选中日历时鼠标滑过的距离,这个值越大,鼠标在选中日历单元格时,就需要滑过很大的距离才能选中,可以设置为 0 |
slotEventOverlap | boolean | 默认值:true 设置视图中的事件显示是否可以重叠覆盖 |
unselectAuto | boolean | 默认值:true 点击日历意外的地方时,是否取消选中 |
dragRevertDuration | number | 默认值:500 如果拖拽不成功,多久回复原状,毫秒 |
dragOpacity | 拖动时候的不透明度 |
3.1.3 options 的 events 键
FullCalenldar
的 options
属性中可以设置一个 events
键,该键是当前日历的事件列表,类型为数组,数组中是对象列表,一个对象代表一个事件,对象中包含的便是事件的设置内容,下标介绍事件的配置选项。
属性 | 类型 | 描述 |
---|---|---|
id | string | 可选,事件唯一标识,重复的事件具有相同的id |
title | string | 必须,事件在日历上显示的title |
allDay | boolean | 是否为全天事件,如果不指定事件在某天的具体时刻,那么这个事件为全天时间。 |
start | 必须,开始时间 | |
end | 可选,结束时间。如果不选择结束时间,那么事件默认为单天事件 | |
url | string | 当指定后,事件被点击将打开对应url。 |
className | array | 事件单元格类名列表,添加之后可以在 css 中单独编写其样式。 ['active-box', 'danger-box'] |
editable | boolean | 事件是否可编辑,可编辑是指可以移动, 改变大小等。 |
3.1.4 可操作事件列表
以下是常用的 FullCalendar 事件列表,事件的 callback 都接受一个或多个参数,参数具体内容有哪些,写起来太累了,所以就自己 log 出来看吧,至于参数具体有几个,没找到资料,只能自己试试咯~。
同样的,事件也是直接设置在 options 中。
事件名称 | 描述 |
---|---|
select | 选中日历某个单元格,或者某一批单元格时触发。 |
unselect | 取消选中时触发 |
eventClick | 点击日历中的某个事件时触发 |
eventRender | 日程事件渲染时触发 |
eventAfterRender | 日程事件被渲染后触发 |
eventDestroy | 日程事件被移除时触发 |
eventDragStart | 日程事件被拖动之前触发 |
eventDragStop | 日程事件被拖动之前触发 |
eventDrop | 日程事件拖拽完成并且时间改变之后触发 |
eventResizeStart | 日程事件的事件范围被改变之前触发 |
eventResizeStop | 日程事件的事件范围被改变之后触发 |
eventResize | 日程事件的时间范围大小被改变成功之后触发 |