Vue2 - 使用Vue FullCalendar实现日历日程管理控件的案例详解（全）

<template>
  <div class="calendar-container">
    <full-calendar
      ref="fullCalendar"
      :options="calendarOptions"
      @eventClick="handleEventClick"
    ></full-calendar>
  </div>
</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 // 注册FullCalendar组件
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ], // 引入所需的插件
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true, // 允许拖拽和创建事件
        selectable: true, // 允许选择日期创建事件
        selectMirror: true, // 允许选择区域创建事件
        weekends: true, // 显示周末
        events: [ // 初始事件数据
          { title: 'Event 1', start: '2023-04-01' },
          { title: 'Event 2', start: '2023-04-02', end: '2023-04-03' }
        ],
        // 更多配置项...
      }
    }
  },
  methods: {
    handleEventClick(event) {
      // 事件点击处理逻辑
      alert(`Event: ${event.event.title}`)
    }
  }
}
</script>
 
<style>
/* 日历容器样式 */
.calendar-container {
  max-width: 900px;
  margin: 40px auto;
}
</style>

这个代码实例展示了如何在Vue 2应用中集成并使用Vue FullCalendar组件。它包括了引入必要的插件、设置日历的配置选项、以及如何处理事件点击事件。这个例子为开发者提供了一个简明的日历实现参考。