使用 Vue 快速集成 FullCalendar 日历组件教程

FullCalendar 是一款功能强大的 JavaScript 日历组件，支持 React/Vue 等主流框架，提供丰富的日历视图和交互功能。本文将手把手教你在 Vue 项目中快速集成，并演示核心功能实现。

📦 主要特性亮点

✅ 月/周/日多视图切换

✅ 拖拽调整事件

✅ 自定义主题样式

✅ 支持iCalendar格式

✅ 丰富的插件生态

🚀 Vue 3 集成步骤（需先安装依赖）

复制代码

npm install @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/interaction

📝 核心示例代码

html 复制代码

<template>
  <div class="calendar-container">
    <FullCalendar
      :options="calendarOptions"
      ref="fullCalendar"
    />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,dayGridWeek,dayGridDay'
        },
        events: [
          { 
            title: '团队周会', 
            start: new Date(),
            color: '#3b82f6'
          },
          {
            title: '项目里程碑',
            start: '2024-03-15',
            end: '2024-03-18',
            color: '#10b981'
          }
        ],
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick,
        editable: true
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      const title = prompt('输入事件标题')
      if (title) {
        this.$refs.fullCalendar.getApi().addEvent({
          title,
          start: arg.dateStr,
          allDay: arg.allDay
        })
      }
    },
    handleEventClick(info) {
      if(confirm(`删除 "${info.event.title}" 事件？`)) {
        info.event.remove()
      }
    }
  }
}
</script>

<style>
/* 推荐引入官方基础样式 */
@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';

.calendar-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 20px;
}
</style>

🔍 代码解析

插件配置：dayGridPlugin 提供月/周视图，interactionPlugin 启用日期点击
事件管理：通过 addEvent/removeEvent 实现动态增删
交互处理：dateClick 处理日期点击，eventClick 处理事件点击
视图控制：headerToolbar 自定义工具栏布局

💡 扩展建议

• 集成时间轴视图（需安装 timeGrid 插件）

• 添加事件拖拽功能（使用 @fullcalendar/interaction）

• 对接后端API实现数据持久化

• 自定义事件渲染模板

📌 注意事项

确保插件与 Vue 版本兼容（示例基于Vue3）
生产环境建议按需引入CSS
复杂交互建议使用Calendar API实例

完整配置文档参考官方文档：Vue Component - Docs | FullCalendar

通过这个示例，您可以快速搭建企业级日历系统，轻松实现会议管理、排班系统等场景需求。FullCalendar 的灵活配置和丰富扩展性，使其成为前端日历解决方案的优选方案。

如果对你有帮助，请帮忙点个赞