vue项目中使用vue-full-calendar日历插件

项目需求需要用到日历插件，踩了许多坑，特此记录一下，避免以后踩坑
首先注意需要安装的插件是：vue-full-calendar 而不是 vue-fullcalendar，两者具体的配置项是不同的
安装：

 npm i vue-full-calendar

安装成功之后引入

import FullCalendar from 'vue-full-calendar' //全局
Vue.use(FullCalendar)

import { FullCalendar } from 'vue-full-calendar' //单页
components:{FullCalendar},

但是这里会提示在vue-full-calendar下没有moment，需要安装这个 comment

 npm i comment

然后引入

import moment from "moment"

需要引入CSS，否则样式会错乱

import 'fullcalendar/dist/fullcalendar.css'

接下来就可以在页面中使用

<full-calendar 
  :events="events" 
  :config="config"  
  locale="fr" 
  @event-drop="eventDrop">
</full-calendar>

js

/* calendar */
events:[     
  {id:1, title : '事件1',start : '2019-11-01',end : '2019-11-01',},
  {id:2, title : '事件2',start : '2019-11-02',end : '2019-11-02',color:'red'},
  {id:3, title : '事件3',start : '2019-11-03',end : '2019-11-03',backgroundColor:'green',},
  {id:4, title : '事件4',start : '2019-11-04',end : '2019-11-04',color:'orange',editable:true},
  {id:5, title : '事件5',start : '2019-11-05',end : '2019-11-05',}
],
config:{
  firstDay:1,
  locale:'zh-cn',
  defaultView: 'month',

  height:'auto',
  header:{
    left:'title',
    center:'',
    right:'prev,today,next',
  },
  /* agenda 模式 */
  allDaySlot:false,
  slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'
  slotLabelInterval:1,
  slotDuration:'00:30:00',
  minTime:'8:00',
  maxTime:'20:00',
  editable:true,
  /* 设置按钮文字 */
  buttonText:{
    today:'今天',
  }
},