npm install vue-fullcalendar
https://www.jianshu.com/p/1b4858e06662
二、显示在页面上
1、main.js
import FullCalendar from 'vue-fullcalendar'
Vue.use(FullCalendar)
2、用到日历的组件
<template>
   <full-calendar :events="monthData" class="test-fc"
                     first-day='1' locale="fr"
                     @changeMonth="changeMonth"    // 切换月时的事件，可自己定义事件
                     @eventClick="eventClick"      // 点击当天的事件，可自己定义事件
                     @dayClick="dayClick"          // 点击当月的事件，可自己定义事件
                     @moreClick="moreClick"></full-calendar>    // 点击 more, 展示当天所有事件，可自己定义事件
</template>
<script>
import { FullCalendar } from 'vue-fullcalendar'
export default {
  data() {
      return {
        monthData: []
  methods: {
     // 选择月份
      changeMonth (start, end, current) {
       console.log('changeMonth', start.format(), end.format(), current.format())
      // 点击事件
      eventClick (event, jsEvent, pos) {
        console.log('eventClick', event, jsEvent, pos)
      // 点击当天
      dayClick (day, jsEvent) {
         console.log('dayClick', day, jsEvent)
      // 查看更多
      moreClick (day, events, jsEvent) {
        console.log('moreCLick', day, events, jsEvent)
  components: {
      'full-calendar': require('vue-fullcalendar')
</script>
参考：https://github.com/Wanderxx/vue-fullcalendar
3、事件返回的值，可依照以下格式（可以添加值，显示出来的值，可从插件中自行修改）
monthData: [
      title : 'eeeeeeeee',  // 事件内容
      start : '2018-12-11', // 事件开始时间
      end : '2018-12-30',   // 事件结束时间
      cssClass: 'red'       // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
      title : 'sssss',
      start : '2018-12-25',
      end : '2018-12-30',
      cssClass: 'blue'  
      title : 'dddddddd',
      start : '2018-12-09',
      end : '2018-12-30',
      cssClass: 'blue'  
      title : 'cccccc',
      start : '2018-12-20',
      end : '2018-12-30'
      cssClass: 'red'  
      title : 'aaaaaa',
      start : '2018-12-01',
      end : '2018-12-30',
      cssClass: 'red'  
      title : 'bbbbbb',
      start : '2018-12-05',
      end : '2019-1-10',
      cssClass: 'blue'
<style>
.red {
  background: red;
.blue {
  background: blue;
</style>
4、修改点击事件（添加删除等功能，可以通过插件所给事件自行修改）
5、插件显示效果
npm install vue-fullcalendar 下载插件，只引用node_modules/vue-fullcalendar/src文件夹，改名为vue-fullcalendar
修改下载的插件，并在本地引入（不是全局引入），是为了防止 npm install 覆盖掉修改

按以下结构引入了src/assets中
import FullCalendar from '../../../../assets/vue-fullcalendar/fullCalendar.vue'
export default {
    ......
    components: {
        'full-calendar': FullCalendar
修改案例：（改本地引入的vue-fullcalendar）
1、修改 点击更多时，显示的内容及样式 （body.vue）

判断显示title还是content值，cssClass为后台返回，用于自定义样式
          <ul class="body-list">
            <li v-for="event in selectDay.events"
              v-show="event.isShow" :class="event.cssClass"
              @click="dayClick(event,$event)">
              {{event.content ? event.content: event.title}}
<!--显示条数-->
              <p v-if="day.events.length > eventLimit"
                 class="more-link" @click.stop="selectThisDay(day, $event)">
                {{day.events.length - getEventsLength(day.events)}} 条
<!--获取事件个数-->
methods : {
      getEventsLength (events) {
        let arr = []
        events.forEach((item, index) => {
          if (item.isShow == false) {
            arr.push(item)
        }, this)
        return arr.length