一、下载

npm install vue-fullcalendar

二、使用

在组件中

<template>
  <div>
    <full-calendar
      :config="config"
      :events="events"
    ></full-calendar>
  </div>
</template>
<script>
import { FullCalendar } from 'vue-full-calendar'
import "fullcalendar/dist/fullcalendar.css";
export default {
  components: { FullCalendar },
  data() {
      return {
        events: [{
          title: '事件内容',  // 事件内容
          start: '2019-05-20 09:00:00', // 事件开始时间
          end: '2019-05-21 12:00:00',   // 事件结束时间
          color: 'rgba(9, 9, 9, 0.2)'       // 事件的显示颜色
        }],
        config: {
          buttonText: { today: "今天", month: "月", week: "周", day: "日" },
          locale: "zh-cn",
          editable: false, //是否允许修改事件
          selectable: false,
          eventLimit: 4, //事件个数
          allDaySlot: false, //是否显示allDay
          defaultView: "month", //显示默认视图
          eventClick: this.eventClick, //点击事件
          dayClick: this.dayClick, //点击日程表上面某一天
       }
     }
  },
  methods: {
     // 点击事件
     eventClick (event, jsEvent, pos) {
       console.log('eventClick', event, jsEvent, pos)
     },
     // 点击当天
     dayClick (day, jsEvent) {
        console.log('dayClick', day, jsEvent)
     }
  }
}
</script>

其他的事件添加方式和eventClick一样，具体有哪些的可以参考

http://keenwon.com/143.html
或者https://blog.csdn.net/supingemail/article/details/48371927

日历表.png