vue项目使用fullendar v5事件日历的分享

学习新技术是不可能的，这辈子都不可能，要不是需求有这个，我肯定不学，好了吐槽完毕，开始进行事件日历fullendar v5版本的分享

效果图

首先看一哈效果图，这是总览图

这个是添加事件预览图

这个是点击单元格快捷添加，最大的区别就是单元格点击事件日期已经确定

另外一个就是点击事件时，出现对事件的再次编辑，相当于预览加编辑二合一

另外针对事件的删除功能，做成了事件长按删除

此外还能拖拽事件到另外一个日期，扩大一个事件的日期范围等功能。

如何使用

企鹅自己使用的vue项目，所以保证你的项目是vue2.x版本。
首先是安装
yarn add @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/vue
基本上这四个插件足够使用了，这几个插件是视图插件，拖拽插件，日程插件以及针对vue使用的插件。而且这种是属于按需使用，避免项目过大的体积。
这里在推荐一个插件，处理日期的dayjs，这个日期插件几乎和moment相同的用法，而且更加轻量，且由于moment不再维护，所以还是转向dayjs怀抱吧。

在组件内部，引入以下依赖。

import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import {
    addLongPress } from '@/utils/assits';
import dayjs from 'dayjs';

同时，FullCalendar是暴露出来的组件，所以模版中需要写上

<FullCalendar ref="calendar" :options="options"></FullCalendar>

记得FullCalendar需要在组件局部注册下，像这样

components: {
   
  FullCalendar
 },

然后就是FullCalendar的options定义了，我们在data中这样定义

data() {
   
	options: {
   
        // 自定义渲染视图
        views: {
   
          dayGridMonth: {
   
            // https://fullcalendar.io/docs/date-formatting
            titleFormat: {
    year: 'numeric', month: '2-digit', day: '2-digit' }
          }
        },
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
        // 自定义渲染按钮
        customButtons： {
   },
        // 自定义渲染头部
        headerToolbar: {
   
          start: 'prevYear prev next nextYear today',
          center: 'title',
          end: 'dayGridMonth timeGridWeek timeGridDay listMonth'
        },
        // 是否可以拖拽
        editable: true,
        // 是否可添加
        selectable: true,
        // 自定义文本
        buttonText: {
   
          today: '今天',
          month: '月',
          week: '周',
          day: '天',
          list: '日程'
        },
        // 语言
        locale: 'zh-cn',
        // 设置周几为第一天
        firstDay: 1,
        // 初始化视图
        initialView: 'dayGridMonth',
        // 是否显示周末
        weekends: true,
        // 当事件过多时是否隐藏
        dayMaxEvents: true,
        // 事件存储
        events: [],
        // 事件渲染完加载这个，类似mounted
        eventDidMount: info => {
   
          addLongPress(info, this.clickEvent, this.longPressEvent);
        },
        // 点击事件
        // eventClick: info => {
   
        //   console.log(info);
        // },
        // 缩放事件
        eventResize: info => {
   
          console.log(info);
        },
        // 拖拽事件
        eventDrop: info => {
   
          console.log(info);
        },
        // 重新渲染
        handleDatesRender: () => {
   },
        // 日期选中
        select: () => {
   
          this.addModal = true;
          this.isRapid = true;
        }
      }
}

基本上用到的api都写上了注释，然后就是自己一些🌰，比如自定义增加事件，显示事件信息，删除事件等等。
不对针对事件删除设想的是和编辑事件放一起，但是最后还是拿出去，做成了长按删除。主要逻辑在这，鼠标长按事件也好做，大致思想是同时监听click事件和mousedown事件，mousedown事件时开启一个定时器，进行长按计时，如果满足则向外回调一个长按callBack，如果不满足，则定义一个开关阻止掉click事件，同样在鼠标移出时，进行复位。这样一个点击和长按的功能就做好了，而且我们还对外传递了两个参数，点击的回调和长按的回调。

export function addLongPress(info, clickCb, longPressCb) {
   
  let timer = null;
  let onOff = false;
  const {
    el } = info;
  const start = e => {
   
  	// 这里的button的意思是鼠标点击可能不是左键点击可能是右键或者中键点击，所以这里需要判断下
    if (e.type === 'click' || e.button !== 0) return;

    if (timer === null) {
   
      timer =