日历日程插件FullCalendar在Vue中的使用指南

Vue 中好用的日历日程插件FullCalendar使用指南

博主wx: -GuanEr-，加博主进前端交流群

参考资料链接：

FullCalendar官网

FullCalendar中文文档

功能： 实现 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	事件是否可编辑，可编辑是指可以移动, 改变大小等。

source object 指向次event的eventsource对象。 color string 事件背景和边框颜色 backgroudColor string 事件背景颜色 borderColor string 事件边框颜色 textColor string 事件文本颜色

3.1.4 可操作事件列表

以下是常用的 FullCalendar 事件列表，事件的 callback 都接受一个或多个参数，参数具体内容有哪些，写起来太累了，所以就自己 log 出来看吧，至于参数具体有几个，没找到资料，只能自己试试咯~。

同样的，事件也是直接设置在 options 中。

事件名称	描述
select	选中日历某个单元格，或者某一批单元格时触发。
unselect	取消选中时触发
eventClick	点击日历中的某个事件时触发
eventRender	日程事件渲染时触发
eventAfterRender	日程事件被渲染后触发
eventDestroy	日程事件被移除时触发
eventDragStart	日程事件被拖动之前触发
eventDragStop	日程事件被拖动之前触发
eventDrop	日程事件拖拽完成并且时间改变之后触发
eventResizeStart	日程事件的事件范围被改变之前触发
eventResizeStop	日程事件的事件范围被改变之后触发
eventResize	日程事件的时间范围大小被改变成功之后触发

以上就是我总结的 FullCalendar 所有常见用法，有什么建议或意见，评论区交流。

扫码拉你进入前端技术交流群