打造你的专属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.event
let id = obj.id
let start = obj.startStr
let end = obj.endStr
console.log([start,end],'开始拖拽时间点');
}
// 拖拽结束
const stopDrag = (event,jsEvent,ui)=>{
console.log(event,'endedb');
let obj = event.event
let start = obj.startStr
let end = obj.endStr
console.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的结合，不仅让日程管理变得简单直观，也极大地提升了用户体验。希望这篇实战教程能帮助你在未来的项目中快速实现高效、美观的日程管理功能。
官网文档地址
官网文档地址
