打造你的专属Vue组件：基于FullCalendar超实用“日程任务管理组件”实战
在现代Web应用中，日程管理是一个常见而又关键的功能，它帮助用户高效安排和追踪日常任务及会议。Vue.js作为一个流行的前端框架，以其简洁的语法和强大的组件化能力深受开发者喜爱。本文将手把手教你如何利用Vue 3和FullCalendar库构建一个功能丰富、易用的日程任务管理组件，让你的应用瞬间提升日程管理体验。
引言
FullCalendar是一款功能全面的日历插件，支持多种视图展示、事件拖放编辑、外部数据源集成等功能，是构建日程管理系统的理想选择。结合Vue 3的Composition API，我们可以轻松实现组件化开发，提高代码的可维护性和复用性。
效果
准备工作
安装依赖
安装FullCalendar及其必要的Vue 3适配器和视图插件：
npm install @fullcalendar/core @fullcalendar/vue3 @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list
引入样式
在public/index.html中加入FullCalendar的CSS：
<head><!-- ... --><link rel="stylesheet" href="@fullcalendar/core/main.css"><link rel="stylesheet" href="@fullcalendar/daygrid/main.css"><link rel="stylesheet" href="@fullcalendar/timegrid/main.css"><link rel="stylesheet" href="@fullcalendar/list/main.css"><!-- ... -->
</head>
创建日程任务管理组件
新建组件
在src/components目录下创建Calendar.vue：
<template><div class="app-container"><FullCalendar :options="calendarOptions" /></div>
</template><script setup>
import { defineComponent } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interaction from "@fullcalendar/interaction";
import dayjs from 'dayjs'const matchList = ref([{id: "1",title: "第一个任务",start: "2024-05-26 13:22:24",allDay: true,color: "#FECACA",textColor: "#6B7280",},{id: "11",title: "第二个任务",start: "2024-05-26 13:22:24",end: "2024-05-28 23:22:24",allDay: true,color: "#6EE7B7",},{id: "12",title: "第三个任务",start: "2024-05-26 13:22:24",allDay: true,color: "#93C5FD",},{id: "13",title: "劳动节",start: "2024-05-01 00:00:00",allDay: true,color: "#F59E0B",editable: false,},{id: "2",title: "第二个任务",start: "2024-05-27 13:22:24",end: "2024-06-27 23:22:24",allDay: true,color: "#FBCFE8",},{id: "4",title: "第三个任务",start: "2024-05-28 13:22:24",end: "2024-046-28 23:22:24",allDay: true,color: "#EDE9FE",},
]);const handleDateSelect = (e) => {// console.log(e, "handleDateSelect");
};const handleEventClick = (e) => {// console.log(e, "handleEventClick");};const handleEvents = (e) => {// console.log(e, "handleEvents");
};
const eventDrop = (event,dayDelta,minuteDelta,allDay,revertFunc,jsEvent,ui,view
) => {};
// 开始拖拽
const startDrag = (event,jsEvent,ui)=>{console.log(event,'ssss');let obj = event.eventlet id = obj.idlet start = obj.startStrlet end = obj.endStrconsole.log([start,end],'开始拖拽时间点');
}
// 拖拽结束
const stopDrag = (event,jsEvent,ui)=>{console.log(event,'endedb');let obj = event.eventlet start = obj.startStrlet end = obj.endStrconsole.log([start,end],'结束拖拽时间点');
}
// 定义日历配置
const calendarOptions = {plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interaction],locale: "zh-cn",firstDay: "1",initialView: "dayGridMonth", // 初始视图weekends: true, // 显示周末height: 800, //日历高度eventColor: "#3BB2E3", // 全部日历日程背景色themeSystem: "bootstrap", // 主题色(本地测试未能生效)timeGridEventMinHeight: "20", // 设置事件的最小高度aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。headerToolbar: {left: "prev,next today",center: "title",right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",},// buttonText: {// today: '今天',// month: '月',// week: '周',// day: '日'// },slotLabelFormat: {hour: "2-digit",minute: "2-digit",meridiem: false,hour12: false, // 设置时间为24小时},handleWindowResize: true,droppable: true, //可拖拽的editable: true,selectable: true,selectMirror: true,dayMaxEvents: true,weekends: true,selectable: true, // 是否可以选中日历格selectMirror: true,selectMinDistance: 0, // 选中日历格的最小距离dayMaxEvents: true,weekends: true,navLinks: true, // 天链接selectHelper: false,slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许select: handleDateSelect,eventClick: handleEventClick,eventsSet: handleEvents,eventDragStart:startDrag,eventDragStop:stopDrag,events: matchList.value,
};
</script>数据交互
在真实场景中，事件数据通常来自API。你可以使用axios或fetch等库获取数据，并填充到calendarOptions.events中。这里简单模拟数据加载过程：
// 在onMounted内添加
const fetchData = async () => {try {const response = await fetch('/api/events'); // 假设的API路径const eventsData = await response.json();calendarRef.value.getApi().addEventSource(eventsData);} catch (error) {console.error('Error fetching events:', error);}
};
fetchData();
添加、编辑、删除事件
FullCalendar提供了丰富的API来处理事件的交互，如select用于添加新事件，eventDrop和eventResize用于编辑事件，eventRemove用于删除事件。你可以通过监听这些事件并在回调中实现相应的逻辑。
结语
至此，一个基本的日程任务管理组件已经构建完成，你可以根据项目需求进一步定制，如添加权限控制、时间区间选择限制、事件颜色分类等高级功能。Vue 3与FullCalendar的结合，不仅让日程管理变得简单直观，也极大地提升了用户体验。希望这篇实战教程能帮助你在未来的项目中快速实现高效、美观的日程管理功能。
官网文档地址
官网文档地址
