阐明

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>