一、下载

npm install vue-fullcalendar

https://www.jianshu.com/p/1b4858e06662

二、显示在页面上

1、main.js

import FullCalendar from 'vue-fullcalendar'
Vue.use(FullCalendar)

2、用到日历的组件

<template>
<div>
   <full-calendar :events="monthData" class="test-fc"
                     first-day='1' locale="fr"
                     @changeMonth="changeMonth"    // 切换月时的事件，可自己定义事件
                     @eventClick="eventClick"      // 点击当天的事件，可自己定义事件
                     @dayClick="dayClick"          // 点击当月的事件，可自己定义事件
                     @moreClick="moreClick"></full-calendar>    // 点击 more, 展示当天所有事件，可自己定义事件
</div>
</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、插件显示效果

vue-fullcalendar.png