vue项目，使用FullCalendar日历插件

本文案例是月视图下的预定管理

1. 安装FullCalendar，按需引入，官方文档：https://fullcalendar.io/docs/vue

npm install @fullcalendar/vue @fullcalendar/daygrid moment

2. 在页面中引用fullcalendar组件

<template>
  <div class='calendarAll'>
    <div class='calendarBox'>
      <FullCalendar ref='fullCalendar' :options='calendarOptions'></FullCalendar>
    </div>
  </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {

  data() {
    return {
      calendarOptions: {}
    }
  },
  components: { FullCalendar },
  methods: {}
}
</script>

<style scoped>

</style>

3. options配置

calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
        firstDay: '0', //以周日为每周的第一天
        // weekends: true,//是否在日历中显示周末
        locale: 'zh-cn', //语言
        defaultView: 'month', //默认按月显示
        height: 'auto', //高度
        fixedWeekCount: false, //是否固定显示六周
        // weekMode:"liquid",//周数不定，每周的高度可变，整个日历高度不变
        allDaySlot: false,
        showNonCurrentDates: false,
        // locale:'zh' 国际化，中文
        // initialView:'dayGridMonth' 默认显示视图，月视图
        // minTime:'00:00:00' 时间网格中时间的最小值，0点
        // maxTime:'23:00:00' 时间网格中时间的最大值，23点
        // slotDuration:'00:15:00' 时间网格中时间间隔，15分钟
        // defaultTimedEventDuration:'00:30' 日程事件在时间网格中占用的高度，30分钟的高度
        // eventLimit:true 是否限制日程事件的数量，限制
        // fixedWeekCount:false 是否固定月视图显示的周数，不固定
        // showNonCurrentDates:false 是否显示非本月日期，不显示
        // allDaySlot:false 是否显示全天，不显示；设置显示后会在时间网格头部显示
        // weekends:true 是否显示周末，显示
        // slotLabelFormat:slotLabelFormat 时间网格时间格式
        // eventTimeFormat:eventTimeFormat 日程事件时间格式
        // firstDay:1 星期的第一列显示，周一(0周日 1周一 2周二...)
        // headerToolbar:header 头部工具条
        // buttonText:buttonText 按钮文本
        // plugins:plugins 绑定的控件
        // events:events 日程事件
        // validRange:validRange 全局日期范围；超出范围按钮会禁用
        // datesSet:datesSet 日期渲染；修改日期范围后触发
        // eventClick:handleEventClick 点击日程事件，显示详情
        // dateClick:handleDateClick 点击日期，显示新增
        // allDay:true,
        headerToolbar: {
          //表头信息
          left: '',
          center: '',
          right: ''
        },
        //事件
        events: [

        ]
      }

4. events配置，官方文档：https://fullcalendar.io/docs/event-parsing

 events: [
    { 
      title: 'The Title', 
      start: '2018-09-01', 
      end: '2018-09-02' 
    }
  ]

6. 部分切换日期方法

this.$refs.fullCalendar.getApi().prev()
this.$refs.fullCalendar.getApi().next()
this.$refs.fullCalendar.getApi().gotoDate( '20221-07' )

7. 完整代码

<template>
  <div class='calendarAll'>
    <div class='headerBox'>
      <el-row>
        <el-col :span='8'
        >
          <div class='formBox'>
            <el-date-picker
              size='small'
              v-model='yearMonth'
              type='month'
              placeholder='选择月'
              value-format='yyyy-MM'
              :clearable='false'
              @change='changeDate'
            >
            </el-date-picker>
            <!-- <el-button size="small" type="primary" @click="changeDate"
              >跳转</el-button
            > -->
          </div>
        </el-col
        >
        <el-col :span='8'
        >
          <div style='text-align: center'>
            <el-button
              type='primary'
              size='mini'
              icon='el-icon-caret-left'
              circle
              @click='datePre()'
            ></el-button>
            <span class='dateText'>{{ calendarDate }}</span>
            <el-button
              size='mini'
              type='primary'
              icon='el-icon-caret-right'
              circle
              @click='dateNext()'
            ></el-button>
          </div
          >
        </el-col>
        <el-col :span='8'>
          <div></div>
        </el-col>
      </el-row>
    </div>

    <div class='calendarBox'>
      <FullCalendar ref='fullCalendar' :options='calendarOptions'></FullCalendar>
    </div>
  </div>
</template>
<script>
import api from '../../../api/app'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  props: {
    id: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      roomId: '',
      isAdd: false,
      yearMonth: '',
      calendarDate: '',
      selectDate: '', //日期选择器选中的月份
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
        firstDay: '0', //以周日为每周的第一天
        // weekends: true,//是否在日历中显示周末
        locale: 'zh-cn', //语言
        defaultView: 'month', //默认按月显示
        height: 'auto', //高度
        fixedWeekCount: false, //是否固定显示六周
        // weekMode:"liquid",//周数不定，每周的高度可变，整个日历高度不变
        allDaySlot: false,
        showNonCurrentDates: false,
        // locale:'zh' 国际化，中文
        // initialView:'dayGridMonth' 默认显示视图，月视图
        // minTime:'00:00:00' 时间网格中时间的最小值，0点
        // maxTime:'23:00:00' 时间网格中时间的最大值，23点
        // slotDuration:'00:15:00' 时间网格中时间间隔，15分钟
        // defaultTimedEventDuration:'00:30' 日程事件在时间网格中占用的高度，30分钟的高度
        // eventLimit:true 是否限制日程事件的数量，限制
        // fixedWeekCount:false 是否固定月视图显示的周数，不固定
        // showNonCurrentDates:false 是否显示非本月日期，不显示
        // allDaySlot:false 是否显示全天，不显示；设置显示后会在时间网格头部显示
        // weekends:true 是否显示周末，显示
        // slotLabelFormat:slotLabelFormat 时间网格时间格式
        // eventTimeFormat:eventTimeFormat 日程事件时间格式
        // firstDay:1 星期的第一列显示，周一(0周日 1周一 2周二...)
        // headerToolbar:header 头部工具条
        // buttonText:buttonText 按钮文本
        // plugins:plugins 绑定的控件
        // events:events 日程事件
        // validRange:validRange 全局日期范围；超出范围按钮会禁用
        // datesSet:datesSet 日期渲染；修改日期范围后触发
        // eventClick:handleEventClick 点击日程事件，显示详情
        // dateClick:handleDateClick 点击日期，显示新增
        // allDay:true,
        headerToolbar: {
          //表头信息
          left: '',
          center: '',
          right: ''
        },
        events: [

        ]
      }

    }
  },
  watch: {
    id: {
      handler(n, o) {
        console.log('子组件中的name值： ' + n, o)
        this.roomId = n
        this.getCalendarEvents()
      },
      deep: true // 深度监听父组件传过来对象变化
    }
  },
  mounted() {
    this.yearMonth = this.getNowFormatDate()
    this.calendarDate = this.getNowFormatDate()
    this.getRoomList()
  },
  components: { FullCalendar },
  methods: {
    getRoomList() {
      var that = this
      api
        .findSiteList()
        .then((res) => {
          console.log(1)
          console.log(res)
          that.roomId = res.data[0].id
          that.getCalendarEvents()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getCalendarEvents() {
      let data = {
        id: this.roomId,
        month: this.calendarDate
      }
      api
        .findLeaseSiteInfo(data)
        .then((res) => {
          var events = []
          for (let i = 0; i < res.data.data.length; i++) {
            let tempObj = {}

            if (res.data.data[i].siteTimeFrame == 1) {
              tempObj = {
                id: res.data.data[i].id,
                title: '上午9:00-11:00已订',
                start: res.data.data[i].siteDate.substring(0, 10)
              }
              events.push(tempObj)
            } else if (res.data.data[i].siteTimeFrame == 2) {
              tempObj = {
                id: res.data.data[i].id,
                title: '下午14:00-18:00已订',
                start: res.data.data[i].siteDate.substring(0, 10)
              }
              events.push(tempObj)
            } else if (res.data.data[i].siteTimeFrame == 3) {
              tempObj = {
                id: res.data.data[i].id,
                title: '上午9:00-11:00已订',
                start: res.data.data[i].siteDate.substring(0, 10)
              }
              events.push(tempObj)
              tempObj = {
                id: res.data.data[i].id * 2,
                title: '下午14:00-18:00已订',
                start: res.data.data[i].siteDate.substring(0, 10)
              }
              events.push(tempObj)
            }
          }
          console.log(events)
          this.calendarOptions.events=events
        })
        .catch((err) => {
          console.log(err)
        })
    },
    datePre() {
      this.$refs.fullCalendar.getApi().prev()
      let tempTime = this.$refs.fullCalendar.getApi().getDate()
      this.yearMonth = this.timestampToTime(tempTime)
      this.calendarDate = this.timestampToTime(tempTime)
      this.getCalendarEvents()
    },
    dateNext() {
      this.$refs.fullCalendar.getApi().next()
      let tempTime = this.$refs.fullCalendar.getApi().getDate()
      this.yearMonth = this.timestampToTime(tempTime)
      this.calendarDate = this.timestampToTime(tempTime)
      this.getCalendarEvents()
    },
    changeDate() {
      this.$refs.fullCalendar.getApi().gotoDate( this.yearMonth )
      let tempTime = this.$refs.fullCalendar.getApi().getDate()
      this.yearMonth = this.timestampToTime(tempTime)
      this.calendarDate = this.timestampToTime(tempTime)
      this.getCalendarEvents()
    },
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month
      return currentdate
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = date.getMonth() + 1
      if (M >= 1 && M <= 9) {
        M = '0' + M
      }
      return Y + M
    }
  }
}
</script>

<style scoped>

</style>

7. 7