Vue中使用Fullcalendar思路

一、npm 安装 Fullcalendar及相关插件

npm i --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/list

说明:   
@fullcalendar/vue    FullCalendar 的 vue 组件
@fullcalendar/daygrid    月视图插件(按需安装)
@fullcalendar/timegrid    周视图和日视图插件(按需安装)
@fullcalendar/interaction    接口插件(按需安装)
@fullcalendar/list    日程视图插件(按需安装)

二、引入并使用

<template>
    <FullCalendar
        ref="fullcalendar"
        :options='calendarOptions'
      >
        <template v-slot:eventContent='arg'>
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
</template>
<script>
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 {

  components: {
    FullCalendar // make the <FullCalendar> tag available
  },

  data: function() {
    return {
      calendarOptions: {
        plugins: [    //配置日历插件
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin,// needed for dateClick
          listPlugin 
        ],
        //其他一些相关配置
    }
  }
}
</script>

三、使用 FullCalendar提供的接口

1. 给 FullCalendar 配置 ref属性

<FullCalendar ref="fullcalendar" :options='calendarOptions'>

2. 通过 ref 和 getApi() 调用 Fullcalendar 中的方法

this.$refs.fullcalendar.getApi().gotoDate('2021')

具体配置信息和接口信息可参考以下链接：

官方文档：http://arshaw.com/fullcalendar/docs/

FullCalendar 官方文档翻：http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

FullCalendar中文文档：API_Hesper_Pan的博客-CSDN博客_fullcalendar