FullCalendar日历控件vue使用记录

推荐一个Fullcalendar的api地址
Fullcalendar中文文档
Fullcalendar安装
1、安装所需要的npm包

npm install --save @fullcalendar/vue 
下面包是日历的周视图、日视图等插件包：
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid

安装后的fullcalendar源码和其它插件都会在@fullcalendar

2、导入HTML

<template>
  <div>
      <FullCalendar ref="myCalendar" :options="calendarOptions"/>
  </div>
</template>

3、导入JS

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: 'MaintenanceCalendarview',
  components: {
    FullCalendar
  },
  data () {
    return {
      calendarOptions: {
      calendarOptions: {
        // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        initialView: "timeGridWeek", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        locale: "zh-cn", // 切换语言，当前为中文
        eventColor: "#3BB2E3", // 全部日历日程背景色
        themeSystem: "bootstrap", // 主题色(本地测试未能生效)
        initialDate: this.$moment().format("YYYY-MM-DD"), // 自定义设置背景颜色时一定要初始化日期时间
        // timeGridEventMinHeight: "20", // 设置事件的最小高度
        aspectRatio: 1.198, // 设置日历单元格宽度与高度的比例。
        displayEventTime: true, // 是否显示时间
        allDaySlot: false, // 周，日视图时，all-day 不显示
        // eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        // unselectAuto: false, //当点击页面日历以外的位置时，是否自动取消当前的选中状态。
        headerToolbar: {
          // 日历头部按钮位置
          left: "",
          center: "title",
          // right: "timeGridWeek",
          right: "",
        },
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
        },
        slotLabelFormat: {
          hour: "2-digit",
          minute: "2-digit",
          meridiem: false,
          hour12: false, // 设置时间为24小时
        },
        // 事件
        datesSet: this.datesSet,
        customButtons: {
          myCustomButton: {
            text: "自定义按钮",
            click: function () {
              alert("点击了自定义按钮!");
            },
          },
        },
        eventClick: this.handleEventClick, // 点击日历日程事件
        eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
        eventDragStart: this.eventDragStart, // 拖动事件开始的时候
        eventDrop: this.eventDrop, // 拖动日历日程事件
        updateEvent: this.updateEvent,
        eventResize: this.eventResize, // 修改日历日程大小事件
        select: this.handleDateSelect, // 选中日历格事件
        eventDidMount: this.eventDidMount, // 安装提示事件
        // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
        // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
        eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
        // allowContextMenu: false,
        editable: false, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: false, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
        eventDurationEditable: false, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        dragRevertDuration: 500,
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        dayMaxEvents: false,
        weekends: true,
        navLinks: false, // 天链接
        // selectHelper: false,
        slotEventOverlap: true, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
        // 后台返回的数据结构
        events: [],
        // 新增时间段数组
      }
    }
  },
  methods: {
     eventMouseEnter({ event, jsEvent, view }) { // 鼠标划过的事件
      if (event.event.classNames.length) {
        // console.log(event)
      }
    },
    eventDrop({ event, revert }) {
      console.log(event)
    }

  }
}

event的数据格式

events: [
      {
        title : '可以拖动但不能缩放',
        start : '2019-07-01 12:30',
        end : '2019-07-01 13:30',
　　     editable: true
      },//可以拖动但不能缩放，但在周、日视图中是可以进行缩放的
      {
        title : '可以拖动、缩放',
        start : '2019-07-02 00:00',
        end : '2019-07-02 23:59',
        color:'red',
        editable: true
      }, //可以拖动、缩放
　　   {
        title : 'event 2',
        start : '2019-07-02',
        end : '2019-07-02',
        color:'red',
        editable: true
      }, 
  { title: 'event 1', date: '2020-06-01', classNames:['cal'],
        editable: true
      },
      {
        start: '2020-07-24',
        end: '2020-07-28',
        overlap: false,
        display: 'background',
        color: '#ff9f89'
      },//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
    ],

自定义事件方法（dblClick）因为他里面没有点击删除事件所以要去源码里面自己添加一个删除事件

手动添加删除事件

最后的效果就是这样的啦~~~~~~~~~~~~~~