了解Vue中日历插件Fullcalendar

<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 ], // 引入所需的插件
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        selectable: true,
        weekends: true,
        events: [ // 初始事件数据
          { title: 'Event Now', start: new Date() },
          // 更多事件...
        ],
        // 其他日历配置...
      }
    }
  },
  methods: {
    handleEventClick(event) {
      // 事件点击处理函数
      alert('Event: ' + event.event.title)
    }
  }
}
</script>

这个例子展示了如何在Vue应用中集成FullCalendar日历插件，并处理事件点击事件。代码中定义了日历的配置选项，并在事件点击时弹出警告框显示事件标题。