关于vue.js:自定义-FullCalendar-v5-Vue2

阐明

FullCalendar 版本为 5.x，Vue 版本为 2.x

次要内容

• 去除默认 headerToolbar，自定义工具栏；
• 任意月份跳转，可返回以后月份；
• 增加事件；
• 查看事件详情（点击）

成果

代码

为了了解和应用，合并简化了代码。主性能流程简洁明了，可依据理论需要场景 DIY。

代码中工夫格式化选用 day.js，可依据我的项目更改工夫格式化办法

引入依赖

$ npm i @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/vue

Calendar.vue

<template>
    <div>
    <div class="toolbar-boxer">
      <div>
        <el-date-picker
          v-model="selectMonth"
          type="month"
          :clearable="false"
          placeholder="抉择月"
          value-format="yyyy-MM"
          @change="handleDatePick">
        </el-date-picker>
        <el-button class="margin-left" v-if="btnReturnCurrenMonthVisiable" @click="handleReturnCurrentMonth"> 返回今日 </el-button>
      </div>
      <div class="toolbar-right">
        <el-button type="primary" @click="handleAddEvent"> 增加课程 </el-button>
      </div>
    </div>

    <full-calendar
      ref="fullCalendar"
      class="calendar"
      :options="calendarOptions" />
  </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import dayjs from 'dayjs'

export default {
  props: {
    events: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 监听事件 list 的变动，更新界面
    events (newVal, oldVal) {this.calendarOptions.events = newVal}
  },
    data () {
    return {
      btnReturnCurrenMonthVisiable: false,
      currentDate: null,
      selectMonth: null, // 以后抉择的月份
      calendarApi: null,
      calendarOptions: {plugins: [ dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh-cn',
        headerToolbar: false, // 不显示头部 toolbar
        // headerToolbar: {
        //   start: 'addEventBtn',
        //   center: 'title'
        // },
        events: this.events,
        eventTimeFormat: { // 事件工夫的格式化
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
        displayEventEnd: true, // 事件显示完结工夫
        eventClick: this.handleEventClick
      },
    }
  },
  mounted () {this.calendarApi = this.$refs.fullCalendar.getApi()
    this.currentDate = dayjs(this.calendarApi.getDate()).format('YYYY-MM')
    this.selectMonth = this.currentDate
  },
  methods: {
    /**
     * 点击事件
     */
    handleEventClick (eventClickInfo) {this.$emit('onEventClick', eventClickInfo)
    },
    /**
     * 增加事件
     */
    handleAddEvent () {this.$emit('onAddEvent')
    },
    /**
     * 下拉抉择日期并跳转至相应月份
     */
    handleDatePick (month) {
      // 抉择了别的月份，则显示返回今日按钮
      this.btnReturnCurrenMonthVisiable = month !== this.currentDate
      this.calendarApi.gotoDate(month)
    },
    /**
     * 返回以后月份
     */
    handleReturnCurrentMonth () {this.calendarApi.gotoDate(this.currentDate)
      this.btnReturnCurrenMonthVisiable = false
      this.selectMonth = this.currentDate
    },
  },
  components: {FullCalendar},
}
</script>

<style scoped>
.toolbar-boxer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.toolbar-right {text-align: right;}

.calendar {margin-top: 1rem;}

.margin-left {margin-left: 1rem;}
</style>

在页面中应用 Calendar.vue 组件

xxx.vue

<template>
    <calendar
            :events="dataEventList"
            @onAddEvent="onAddEvent"
            @onEventClick="onEventClick"
          />
</template>
<script>
import Calendar from '@/components/Calendar'

export default {data () {
    return {dataEventList [], // 事件 list
    }
  },
  methods: {
    /**
     * 增加事件 Demo
     */
    onAddEvent () {
      // Event 数据根本构造，可增加自定义属性
      this.dataEventList.push({
        title: '事件名称',
        start: '0000-00-00 00:00:00', // 开始工夫
        end: '0000-00-00 00:00:00', // 完结工夫
        customAttribute: 'hello world'，// 可增加自定义属性，便于在查看详情时获取应用
      })
    },
    /**
     * 点击事件，查看事件详情
     */
    onEventClick (eventInfo) {// _event: { title, start, end}
      const _event = eventInfo.event
      // _props: {customAttribute, ...}
      const _props = _event._def.extendedProps
      
      // todo 依据应用场景展现事件详情或执行动作
    },
  },
  components: {Calendar},
}
</script>