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

打造你的专属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用于添加新事件,eventDropeventResize用于编辑事件,eventRemove用于删除事件。你可以通过监听这些事件并在回调中实现相应的逻辑。

结语

至此,一个基本的日程任务管理组件已经构建完成,你可以根据项目需求进一步定制,如添加权限控制、时间区间选择限制、事件颜色分类等高级功能。Vue 3与FullCalendar的结合,不仅让日程管理变得简单直观,也极大地提升了用户体验。希望这篇实战教程能帮助你在未来的项目中快速实现高效、美观的日程管理功能。

官网文档地址

官网文档地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/21165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编译选项导致的结构体字节参数异常

文章目录 前言问题描述原因分析问题解决总结 前言 在构建编译工程时&#xff0c;会有一些对应的编译配置选项&#xff0c;不同的编译器&#xff0c;会有对应的配置项。本文介绍GHS工程中编译选项配置不对应导致的异常。 问题描述 在S32K3集成工程中&#xff0c;核1的INP_SWC…

transformer中的ffn

## import torch import torch.nn as nn import torch.nn.functional as F import logging logging.basicConfig(levellogging.INFO, format%(asctime)s %(levelname)s: %(message)s) # 定义FFN层 class FeedForwardNetwork(nn.Module): def __init__(self, input_dim, hi…

python运营商身份证二要素查验接口、身份证实名认证接口

随着网络服务安全需求的日益增长&#xff0c;个人信息的真实性和安全性成为了众多在线平台关注的焦点。近日&#xff0c;为应对这一挑战&#xff0c;翔云人工智能接口开放平台提供了Python语言的身份证二要素查验接口”及“实名认证接口”&#xff0c;旨在为各行业提供高效、准…

将字符串 “()“ ““ “|“ 条件组成的复杂表达式转换为ES查询语句

应用场景 "()" "&" "|" 这几个条件对于我们来说并不陌生, 其表达的逻辑非常明了, 又能通过很少的字符表达很复杂的嵌套关系, 在一些复杂的查询中会经常用到, 因此我最近也遇到了类似的问题,一开始觉得这类的工具应该挺常见的, 结果搜了半天…

JVM垃圾收集器和内存分配策略

概述 Java内存运行时数据区的程序计数器、虚拟机栈、本地方法栈3个区域会随着线程而产生&#xff0c;随线程而消失。这几个区域分配多少内存时在类结构确定下来即已知的&#xff0c;在这几个区域内就不需要过多考虑如何回收内存的问题&#xff0c;当方法结束或者线程结束时&am…

【spring】第一篇 IOC和DI入门案例

Spring到底是如何来实现IOC和DI的&#xff0c;那接下来就通过一些简单的入门案例&#xff0c;来演示下具体实现过程。 目录 前期准备 一、IOC入门案例 思路分析 代码实现 二、DI入门案例 思路分析 代码实现 总结 前期准备 使用IDEA创建Maven项目&#xff0c;首先需要配…

JAVAEE1

Web前端&#xff1a; 1.建立web开发的息维模式写代码不仅仅是为了实现某个功能&#xff0c;更是学习解决问题的思维方式 2.先使用&#xff0c;再理解&#xff0c;会导致刚开始比较懵&#xff0c;不知其所以然.切忌不可深陷其中&#xff0c; 3.涉及简单的软件工程的设计思想&…

Springboot整合kafka简单使用

kafka 一&#xff0c;介绍 Kafka 是一个开源的分布式流处理平台&#xff0c;最初由 LinkedIn 开发并贡献给 Apache 软件基金会。它设计用于构建高性能、持久性、可伸缩和容错的实时数据管道和流处理应用程序。 以下是 Kafka 的一些关键特点和概念&#xff1a; 发布-订阅模型…

SPWM载波调制方式-三电平杂记1

方法一&#xff1a; P2 O1 N0 方法二&#xff1a;双载波直接发波 方法三&#xff1a;负轴载波和调制波往上抬升1&#xff0c;得到使用同一个载波 在正半周在P和O切换&#xff0c;在下半轴式O和N切换

自动评论自动私信引流系统,自动化时代的挑战与机遇

随着科技的飞速发展&#xff0c;自动化技术已经渗透到我们生活的方方面面。从工业生产线上的机械臂到家庭中的智能助手&#xff0c;自动化不仅改变了我们的工作方式&#xff0c;也在重塑着社会的面貌。然而&#xff0c;在享受自动化带来的便利和效率的同时&#xff0c;我们也必…

961题库 北航计算机 MIPS基础选择题 附答案 选择题形式

有题目和答案&#xff0c;没有解析&#xff0c;不懂的题问大模型即可&#xff0c;无偿分享。 第1组 习题 MIPS处理器五级流水线中&#xff0c;涉及DRAM的是 A. 取指阶段 B. 译码阶段 C. 执行阶段 D. 访存阶段 MIPS处理器五级流水线中&#xff0c;R型指令保存结果的阶段是 A.…

关于高版本 Plant Simulation 每次保存是 提示提交comm对话框的处理方法

关于高版本 Plant Simulation 每次保存是 提示提交comm对话框的处理方法 如下图 将model saving history 修改为None即可 关于AutoCAD 2022 丢失模板库的问题 从新从以下地址打开即可&#xff1a; D:\Program Files\Autodesk\AutoCAD 2022\UserDataCache\zh-cn\Template

Visual Studio Installer 点击闪退

Visual Studio Installer 点击闪退问题 1. 问题描述2. 错误类型3. 解决方法4. 结果5. 说明6. 参考 1. 问题描述 重装了系统后&#xff08;系统版本&#xff1a;如下图所示&#xff09;&#xff0c;我从官方网站&#xff08;https://visualstudio.microsoft.com/ ) 下载了安装程…

Leetcode:正则表达式匹配

目录 普通版本&#xff08;动态规划&#xff09; 状态表示 状态转移方程 优化③①情况 数学化简分析 结合实际情况画图化简分析 总结 最终代码 题目链接&#xff1a;10. 正则表达式匹配 - 力扣&#xff08;LeetCode&#xff09; 好像是leetcode前100道里面最难的一道&a…

方法引用与构造方法引用

目录 方法引用 什么是方法引用 构造方法引用 构造方法引用&#xff08;也可以称作构造器引用&#xff09; 数组构造方法引用 方法引用 什么是方法引用 当要传递给 Lambda 体的操作&#xff0c;已经有实现的方法了&#xff0c;可以使用方法引用。 方法引用可以看做是 La…

PHAR反序列化

PHAR PHAR&#xff08;PHP Archive&#xff09;文件是一种归档文件格式&#xff0c;phar文件本质上是一种压缩文件&#xff0c;会以序列化的形式存储用户自定义的meta-data。当受影响的文件操作函数调用phar文件时&#xff0c;会自动反序列化meta-data内的内容,这里就是我们反序…

头歌页面置换算法第3关:计算LRU算法缺页率

2 任务:LRU算法 2.1 任务描述 设计LRU页面置换算法模拟程序:从键盘输入访问串。计算LRU算法在不同内存页框数时的缺页数和缺页率。要求程序模拟驻留集变化过程,即能模拟页框装入与释放过程。 2.2任务要求 输入串长度作为总页框数目,补充程序完成LRU算法。 2.3算法思路 LRU算…

jmeter常用的断言

包括&#xff08;Contains&#xff09;&#xff1a;响应内容包括需要匹配的内容即代表响应成功&#xff0c;支持正则表达式 匹配&#xff08;Matches&#xff09;&#xff1a;响应内容要完全匹配需要匹配的内容即代表响应成功&#xff0c;大小写不敏感&#xff0c;支持正则表达…

vue html2canvas生成base64图片和图片高度

vue html2canvas生成图片 exportAsBase64() {const ele document.getElementById(content);html2canvas(ele, {dpi: 96, // 分辨率 scale: 2, // 设置缩放 useCORS: true, // 允许canvas画布内跨域请求外部链接图片 bgcolor: #ffffff, // 背景颜色 logging: false, // 不…

rust之cargo install cargo-binstall 是什么

cargo-binstall 是什么 官方&#xff1a;https://lib.rs/crates/cargo-binstall Binstall 提供了一种低复杂性的机制来安装 Rust 二进制文件&#xff0c;作为从源代码&#xff08;通过 cargo install &#xff09;构建或手动下载软件包的替代方案。这旨在与现有的 CI 工件和基…