fullcalendar日历插件的基本使用(vue)

<template>
  <FullCalendar
    ref="fullCalendar"
    :options="calendarOptions"
    @eventClick="handleEventClick"
  />
</template>
 
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
 
export default {
  components: {
    FullCalendar // 注册组件
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ], // 引入需要的插件
        initialView: 'dayGridMonth', // 初始视图
        dateClick: this.handleDateClick, // 日期点击事件
        events: [ // 事件数据
          { title: 'Event 1', start: '2023-04-01' },
          // ... 更多事件
        ]
        // 其他日历配置...
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      // 日期点击事件的处理函数
      alert('Date Clicked: ' + arg.dateStr)
    },
    handleEventClick(arg) {
      // 事件点击事件的处理函数
      alert('Event Clicked: ' + arg.event.title)
    }
  }
}
</script>

这段代码展示了如何在Vue应用程序中使用FullCalendar日历插件。首先，我们引入了FullCalendar组件，并定义了日历的选项，包括插件、初始视图和事件数据。我们还定义了两个方法，handleDateClick和handleEventClick，用于处理日期和事件的点击事件。在calendarOptions中，我们可以配置更多的选项来定制日历的外观和行为。