<template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions"/>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  name: "Calendar",
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendar: undefined,
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth', // 初始视图：月视图
        weekends: true, // 是否显示周末

        dateClick: this.onDate, // 日期点击事件
        events: [ // 待办事件列表
          {title: 'event 1', date: '2019-04-01'},
          {title: 'event 2', date: '2019-04-02'}
        ]
      }
    }
  },

  mounted() {
    this.calendar = this.$refs.fullCalendar.getApi();
  },

  methods: {
    onDate: function (arg) {
      alert('date click! ' + arg.dateStr)
      this.calendar.next();
    }
  }
}
</script>
