v6 fullcalendar vue的例子

这是一个基于 Vue 和 FullCalendar 的日历组件示例：

1. 首先，我们需要安装 FullCalendar 和 moment.js：

npm install --save fullcalendar moment

2. 然后，在 Vue 组件中引入 FullCalendar 和 moment.js：

import Vue from 'vue'
import FullCalendar from 'fullcalendar'
import moment from 'moment'

Vue.use(FullCalendar)
Vue.use(moment)

3. 接着，在模板中添加 FullCalendar 组件：

<template>
  <div>
    <full-calendar :events="events" :header="header"/>
  </div>
</template>

4. 最后，在 Vue 实例中定义事件和头部选项：

export default {
  data () {
    return {
      events: [
        {
          title: 'Event 1',
          start: '2021-01-01'
        },
        {
          title: 'Event 2',
          start: '2021-01-05',
          end: '2021-01-07'
        }
      ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      }
    }
  }
}

这样，我们就完成了 Vue 和 FullCalendar 的集成。现在，我们可以在页面上看到一个可交互的日历组件，其中包含了我们定义的事件和头部选项。