FullCalendar插件基本使用--基于vue

另一篇讲的挺详细的：fullCalendar基本使用 ，不过是用原生js写。

fullCalendar插件官网地址

我将补充基于vue的使用，以及一些未提到的用法：
安装引用以及基本使用，见官网如下地址

fullCalendar基于vue

使用
1、大体效果选择
选择自己想要的大体效果，可在整体效果里查看，自己想要拖拽、编辑事件、点击等效果，查看对应模块的效果实现。demo地址

2、Api选择
全部api都会在这里显示：所有api

3、使用
HTML

<template>
  <div class="container">
    <div @click="backToday">返回今天</div>
    <FullCalendar
      class="demo-app-calendar"
      ref="fullCalendar" // 做标记，以方便在事件中取用插件中的方法
      :plugins="calendarPlugins" // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
      :slotEventOverlap="false"  // 事件时间重合时，是否覆盖
      defaultView="dayGridMonth" // 默认视图，设为dayGridMonth，月日程
      locale="zh-cn" // 切换语言，当前为中文
      :timeGridEventMinHeight="20" //设置事件的最小高度
      :allDaySlot="false" // 周，日视图时，all-day 不显示
      :eventLimit="true" //设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
      :eventLimitText="eventLimitText" //设置超过事件时的“更多”字样提示，点击后显示弹窗，eventLimitText可设置字样
      :nowIndicator="true" // 当前是否有红线标识
      height="parent" 
      :views="eventLimitNum" // 在views中设置事件显示数量
      :displayEventEnd="false" // 是否显示事件结束时间
      :slotLabelFormat="{ // 周，日视图时，左侧的显示的时间格式，以下为：00:00，00:30...5:30
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: false,
        meridiem: 'short',
        hour12: false
      }"
      :displayEventTime="false" //是否显示时间时间
      :header="{ // 顶部按钮，以及他们的排列顺序
                  left:'today',
                  center: 'prev,title,next',
                  right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
              }"
      :buttonText="{ // 顶部按钮的文字显示
          today: '回到今天',
          month: '月',
          week: '周',
          day: '日'
        }"
      :columnHeaderText="columnHeaderText" // 表格的表头显示字样，默认为sun,mon,tue.... 中文则显示：周日，周一，周二....
      :events="calendarEventsNew" // 存放数据的入口（面板中显示的事件，一般我们创建或者获取到的事件，按规定格式放入，即可显示在面板中）
      @datesRender="datesRender" // 日期渲染时，触发的事件，默认传入info,一个包含view和el的对象
      :selectable="true" //是否支持选择
      @eventPositioned="eventPositioned" //事件被放置在日历的最终位置后触发。可在此调整事件的存放位置
      @eventClick="eventClick" // 事件被点击时触发
      @eventMouseEnter="eventMouseEnter" // 划入事件时触发
    />

  </div>
</template>

引入

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

JS

export default {
  components: { FullCalendar }, // 引入后注册
  data() {
    return {
      calendarPlugins: [// 插件引入后在此声明后，才可使用
        // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      eventLimitNum: {
        // 事件显示数量限制
        dayGrid: {
          eventLimit: 6
        },
        timeGrid: {
          eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
        }
      },
      columnHeaderText: function(date) {
        let day = date.getDay()
        let map = {
          0: '周日',
          1: '周一',
          2: '周二',
          3: '周三',
          4: '周四',
          5: '周五',
          6: '周六'
        }
        return map[day]
      },
      calendarEvents: [
        // 面板中的事件
      ]
    }
  },
 methods: {
    eventPositioned(info) {
         console.log('事件被放置在日历的最终位置后触发')
     },
     eventLimitText() {
      return '更多,或者其他字样'
    },
    datesRender(info) {
      console.log('当呈现一组新的日期时触发。')
    },
    eventMouseEnter({ el, event }) { //可从info中解构我们需要的东西
      console.log('划入事件时触发。')
    }，
   // ...
   // 获取插件中的方法，比如回到今天的today()方法,下面的为自定义的
   backToday() {
      let calendarApi = this.$refs.fullCalendar.getApi() //通过getApi()方法获取
      calendarApi.today()  //调用回到今天的today()方法
    },

 }
}

CSS
需要引入相应的css文件

<style lang='scss'>

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/timeline/main.css';
@import '~@fullcalendar/resource-timeline/main.css';

</style>

4、踩坑

事件hover效果： eventMouseEnter
与 eventMouseLeave，在vue中，配合使用时，划入日程event中，会同时触发eventMouseEnter与eventMouseLeave，而且会多次重复，经查看是因为在eventMouseEnter与eventMouseLeave改变了数据（然而就是要通过触发它来改变数据 的【手动白眼】），用原生js则不会出现这个问题。