一、下載

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: '事件內(nèi)容',  // 事件內(nèi)容
          start: '2019-05-20 09:00:00', // 事件開始時間
          end: '2019-05-21 12:00:00',   // 事件結(jié)束時間
          color: 'rgba(9, 9, 9, 0.2)'       // 事件的顯示顏色
        }],
        config: {
          buttonText: { today: "今天", month: "月", week: "周", day: "日" },
          locale: "zh-cn",
          editable: false, //是否允許修改事件
          selectable: false,
          eventLimit: 4, //事件個數(shù)
          allDaySlot: false, //是否顯示allDay
          defaultView: "month", //顯示默認(rèn)視圖
          eventClick: this.eventClick, //點擊事件
          dayClick: this.dayClick, //點擊日程表上面某一天
       }
     }
  },
  methods: {
     // 點擊事件
     eventClick (event, jsEvent, pos) {
       console.log('eventClick', event, jsEvent, pos)
     },
     // 點擊當(dāng)天
     dayClick (day, jsEvent) {
        console.log('dayClick', day, jsEvent)
     }
  }
}
</script>

其他的事件添加方式和eventClick一樣，具體有哪些的可以參考

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

日歷表.png