打造你的专属Vue组件：基于FullCalendar超实用“日程任务管理组件”实战

最新推荐文章于 2024-08-15 09:53:53 发布

骨灰级尤雨溪迷弟~

最新推荐文章于 2024-08-15 09:53:53 发布

阅读量1.7k

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43742274/article/details/139396871

版权

打造你的专属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的结合，不仅让日程管理变得简单直观，也极大地提升了用户体验。希望这篇实战教程能帮助你在未来的项目中快速实现高效、美观的日程管理功能。