VUE使用 FullCalendar 5.0 写日程安排

最近要写个日程排课的业务，找到了FullCalendar的日期处理。网上的大部分都是老版本，试出了一堆的坑，看着文档，慢慢的敲出个大概。我写的这些如果帮不了你，你还是去看下文档，虽然是英文的，带能解除大部分的问题。FullCalendar文档地址。

贴一张效果图，如果和你的需求不一样，那就没办法了。

首先是安装插件

npm install --save @fullcalendar/vue @fullcalendar/daygrid

然后引入

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

这里是月日历，要改成周日历的话，需要安装

npm install --save @fullcalendar/timegrid

然后引入，（不一步一步的来了，其他的都配置上的区别了）

<script>
import FullCalendar from '@fullcalendar/vue'
// import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from "@fullcalendar/timegrid";
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
      	initialDate：new Date()//控制指定显示日期
        plugins: [ timeGridPlugin, interactionPlugin ],
        initialView: 'timeGridWeek'
        locale: "zh",//中文
        slotMinTime:'09:00',//展示时间
        slotMaxTime:'18:00',//展示时间
        dateClick: this.addEvent,//点击日历个空白触发事件
        eventClick: this.editEvent,//点击event触发事件
        events: [{
	        title:"",
			start:"",
			end:"",
			id:""
		}],//日程
      }
    }
  }，
  methods：{
  	addEvent(info) {
      console.log(info）
    },
    editEvent(info) {
      console.log(info）
    },
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

如果要对events的数据修改，就能保存id。

如果还有别的疑问，可以留言，我尽量的帮忙，毕竟自己也是菜鸟前端。
在搜索的其他问题，最高是对比下版本。不然报的错，会怀疑自我