当前位置: 首页 > news >正文

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

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

📦 主要特性亮点

        ✅ 月/周/日多视图切换
        ✅ 拖拽调整事件
        ✅ 自定义主题样式
        ✅ 支持iCalendar格式
        ✅ 丰富的插件生态

🚀 Vue 3 集成步骤(需先安装依赖)

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

📝 核心示例代码

<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>

🔍 代码解析

  1. 插件配置:dayGridPlugin 提供月/周视图,interactionPlugin 启用日期点击

  2. 事件管理:通过 addEvent/removeEvent 实现动态增删

  3. 交互处理:dateClick 处理日期点击,eventClick 处理事件点击

  4. 视图控制:headerToolbar 自定义工具栏布局

💡 扩展建议

        • 集成时间轴视图(需安装 timeGrid 插件)
        • 添加事件拖拽功能(使用 @fullcalendar/interaction)
        • 对接后端API实现数据持久化
        • 自定义事件渲染模板

📌 注意事项

  1. 确保插件与 Vue 版本兼容(示例基于Vue3)

  2. 生产环境建议按需引入CSS

  3. 复杂交互建议使用Calendar API实例

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

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

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

相关文章:

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

FullCalendar 是一款功能强大的 JavaScript 日历组件&#xff0c;支持 React/Vue 等主流框架&#xff0c;提供丰富的日历视图和交互功能。本文将手把手教你在 Vue 项目中快速集成&#xff0c;并演示核心功能实现。 &#x1f4e6; 主要特性亮点 ✅ 月/周/日多视图切换 ✅…...

xv6-labs-2024 lab2

lab-2 0. 前置 课程记录 操作系统的隔离性&#xff0c;举例说明就是&#xff0c;当我们的shell&#xff0c;或者qq挂掉了&#xff0c;我们不希望因为他&#xff0c;去影响其他的进程&#xff0c;所以在不同的应用程序之间&#xff0c;需要有隔离性&#xff0c;并且&#xff0…...

redis导入成功,缺不显示数据

SpringBootTest class SecurityApplicationTests {AutowiredStringRedisTemplate template; //添加这句代码&#xff0c;自动装载&#xff0c;即可解决文章三处代码报错Testvoid contextLoads() {String compact Jwts.builder().signWith(Jwts.SIG.HS512.key().build()).subj…...

Flink对比Spark streaming、Storm

对比Spark streaming、Storm 产品 模型 语义 容错机制 状态管理 延时 吞吐量 Storm native at-least-once ack 无 low low Spark streaming micro-batch exactly-once RDD checkpoint 有 medium high Flink native exactly-once checkpoint 有 low …...

力扣316去除重复字母-单调栈

题目来源: 给你一个字符串 s &#xff0c;请你去除字符串中重复的字母&#xff0c;使得每个字母只出现一次。需保证 返回结果的字典序最小&#xff08;要求不能打乱其他字符的相对位置&#xff09;。 示例 1&#xff1a; 输入&#xff1a;s "bcabc" 输出&#xff…...

第421场周赛:数组的最大因子得分、

Q1、数组的最大因子得分 1、题目描述 给你一个整数数组 nums。 因子得分 定义为数组所有元素的最小公倍数&#xff08;LCM&#xff09;与最大公约数&#xff08;GCD&#xff09;的 乘积。 在 最多 移除一个元素的情况下&#xff0c;返回 nums 的 最大因子得分。 注意&…...

COMSOL 与人工智能融合的多物理场应用:28个案例的思路、方法与工具概述

应用案例概述 基于 COMSOL 与人工智能&#xff08;AI&#xff09;结合的应用案例涵盖了 28 个多领域场景&#xff0c;包括工程&#xff08;如热传导优化、结构力学预测&#xff09;、能源&#xff08;如电池热管理、燃料电池性能&#xff09;、生物医学&#xff08;如药物传递…...

【算法】插入排序

算法系列五&#xff1a;插入排序 一、直接插入排序 1.原理 2.实现 3.性质 3.1时间复杂度 3.2空间复杂度 3.3稳定性 二、希尔排序 1.原理 1.1优化方向 1.2优化原理 2.设计 2.1比较无序时 2.2比较有序时 3.实现 4.性质 4.1时间复杂度 4.2空间复杂度 4.3稳定性…...

企业展示型网站模板HTML5网站模板下载指南

在当今数字化浪潮中&#xff0c;企业网站已成为企业展示形象、推广产品和服务的重要窗口。一个设计精美、功能完善的企业展示型网站&#xff0c;不仅能提升企业的品牌形象&#xff0c;还能吸引潜在客户&#xff0c;促进业务增长。而HTML5网站模板&#xff0c;凭借其跨平台兼容性…...

C盘清理——快速处理

C盘清理 | 快速处理 软件&#xff1a;小番茄C盘清理 https://ccleancdn.xkbrowser.com/cleanmaster/FanQieClean_13054_st.exe 前言&#xff1a;为什么需要专业的C盘清理工具&#xff1f; 作为一位长期与Windows系统打交道的技术博主&#xff0c;我深知C盘空间不足带来的痛苦…...

什么是模型驱动开发MDD?有哪些应用场景?

模型驱动开发&#xff08;Model-Driven Development&#xff0c;MDD&#xff09;是一种以模型为核心的软件开发方法&#xff0c;其核心思想是通过创建高层次的抽象模型来描述系统的结构和行为&#xff0c;而非直接编写代码。这些模型经过自动化工具的转换或生成&#xff0c;最终…...

uniapp小程序生成海报/图片并保存分享

调研结果&#xff1a; 方法一&#xff1a;canvasuni.canvasToTempFilePath耗时太长&#xff0c;现在卡在canvas的绘制有问题&#xff0c;canvas绘制的部分东西不生效但是找不到原因 方法二&#xff1a;使用wxml-to-canvas其实也差不多是用canvas手动绘制&#xff0c;可能会卡在…...

从IoT到AIoT:智能边界的拓展与AI未来趋势预测

文章目录 引言&#xff1a;从连接万物到感知万物1. AIoT的本质&#xff1a;将智能嵌入万物2. AIoT的推动力量与挑战2.1 推动力量2.2 关键挑战 3. 五大AIoT未来趋势预测趋势一&#xff1a;边缘智能将成为主流架构趋势二&#xff1a;AI模型将向自适应与多任务演进趋势三&#xff…...

2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛(China Undergraduate Mathematical Contest in Modeling)是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动,目的在于激励学生学习数学的积极性,提高学…...

2140 星期计算

2140 星期计算 ⭐️难度&#xff1a;中等 &#x1f31f;考点&#xff1a;2022、思维、省赛 &#x1f4d6; &#x1f4da; 1️⃣法一&#xff1a; 同余定理&#xff0c; import java.util.Scanner;public class Main2 {public static void main(String[] args) {Scanner sc …...

NVIDIA Jetson 环境安装指导 PyTorch | Conda | cudnn | docker

本文适用于Jetson Nano、TX1/TX2、Xavier 和 Orin系列的设备&#xff0c;供大家参考。 1、PyTorch不同版本安装 这里适用于Jetson Nano、TX1/TX2、Xavier 和 Orin &#xff0c;需要JetPack 4.2以上。 下载地址&#xff1a;PyTorch for Jetson - Jetson & Embedded System…...

理解 Rust 中的 String 分配机制

在 Rust 中&#xff0c;哪怕是一行再普通不过的代码&#xff0c;也可能暗藏玄机。这次我们就来剖析这样一句看似简单的代码&#xff1a; let s "hello world".to_string();这行代码触发了 只读数据段&#xff08;.rodata&#xff09;、堆&#xff08;heap&#xff0…...

园区网拓扑练习

1.拓扑图要求 1.按照图示的VLAN及IP地址需求&#xff0c;完成相关配需 2、要求SW1为VLAN 2/3的主根及主网关&#xff0c;SW2为vlan 20/30的主根及主网关&#xff0c;SW1和SW2互为备份 3.上层通过静态路由协议完成数据通信过程 4.AR1为企业出口路由器 5.要求全网可达 2.需求分…...

CentralCache

目录 一、Span和Spanlist 二、CentralCache 一、Span和Spanlist CentralCache其实也是哈希桶结构&#xff0c;只不过他是一个个的Span&#xff08;Span是管理一定数量的页的结构&#xff09;&#xff0c;而且Span会管理一个freelist&#xff0c;用来挂起一个个的小内存块给Th…...

STM32 基础1

什么是GPIO的上拉和下拉电阻 下拉电阻&#xff1a;把一个不确定的信号通过电阳连接到地&#xff0c;其实就是初始化为低电平。 上拉电阻&#xff1a;把一个不确定的信号通过电连接到高电平&#xff0c;其实就是初始化为高电平。 本质&#xff1a;上拉地注入电流&#xff0c;下…...

Python爬虫第5节-urllib的异常处理、链接解析及 Robots 协议分析

目录 一、处理异常 1.1 URLError 1.2 HTTPError 二、解析链接 2.1 urlparse() 2.2 urlunparse() 2.3 urlsplit() 2.4 urlunsplit() 2.5 urljoin() 2.6 urlencode() 2.7 parse_qs() 2.8 parse_qsl() 2.9 quote() 2.10 unquote() 三、分析网站Robots协议 3.1 R…...

STM32——DAC转换

DAC简介 DAC&#xff0c;全称&#xff1a;Digital-to-Analog Converter&#xff0c;扑指数字/模拟转换器 ADC和DAC是模拟电路与数字电路之间的桥梁 DAC的特性参数 1.分辨率&#xff1a; 表示模拟电压的最小增量&#xff0c;常用二进制位数表示&#xff0c;比如&#xff1a…...

因果推断【Causal Inference】(一)

文章目录 1. 什么是因果推断&#xff1f;2. 为什么要提出因果推断&#xff1f;Motivation&#xff1a;辛普森悖论Scenario 1Scenario 2 3. 【Note】相关性≠因果3.1 混淆(Confounding)——共同原因3.2 样本选择偏差(Selection Bias)——共同结果 4. 潜在结果(Potential Outcome…...

人工智能通识速览(Part5. 大语言模型)

五、大语言模型 1.NLP 自然语言处理&#xff08;Natural Language Processing, NLP&#xff09;是人工智能领域的一个重要分支&#xff0c;专注于研究 计算机如何理解、生成和处理人类语言。它的目标是让机器能够像人类一样“读懂”文本或语音&#xff0c;并执 行翻译、问答、摘…...

优化 Django 数据库查询

优化 Django 数据库查询 推荐超级课程: 本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 优化 Django 数据库查询**理解 N+1 查询问题****`select_related`:外键的急加载**示例何时使用 `select_re…...

MCP AI:下一代智能微服务控制平台 (.NET Core)

平台概述 MCP AI (Microservice Control Platform AI) 是基于.NET Core构建的下一代智能微服务控制平台&#xff0c;旨在为企业级微服务架构提供智能化、自动化的管理和控制能力。 核心特性 智能服务编排 AI驱动的动态服务路由 自适应负载均衡算法 预测性扩展与收缩 统一…...

计算机网络基础:系列教程汇总

计算机网络基础:系列教程汇总 一、前言二、计算机网络基础概要三、计算机网络基础3.1 计算机网络基础:揭开网络世界的神秘面纱3.2 计算机网络基础:剖析网络的构成要素3.3 计算机网络基础:认识网络拓扑结构3.4 计算机网络基础:解析网络协议3.5 计算机网络基础:了解网络类型…...

互联网三高-高性能之JVM调优

1 运行时数据区 JVM运行时数据区是Java虚拟机管理的内存核心模块&#xff0c;主要分为线程共享和线程私有两部分。 &#xff08;1&#xff09;线程私有 ① 程序计数器&#xff1a;存储当前线程执行字节码指令的地址&#xff0c;用于分支、循环、异常处理等流程控制‌ ② 虚拟机…...

学习比较JVM篇(六):解读GC日志

一、前言 在之前的文章中&#xff0c;我们对JVM的结构、垃圾回收算法、垃圾回收器做了一些列的讲解&#xff0c;同时也使用了JVM自带的命令行工具进行了实际操作。今天我们继续讲解JVM。 我们学习JVM的目的是为了了解JVM&#xff0c;然后优化对应的参数。那么如何了解JVM运行…...

说说你对python的理解,有什么特性?

Python是一种高级、解释型、通用的编程语言&#xff0c;由Guido van Rossum于1991年首次发布。经过30多年的发展&#xff0c;Python已成为最受欢迎的编程语言之一&#xff0c;在Web开发、数据分析、人工智能、自动化运维等多个领域都有广泛应用。 Python的核心特性 1. 简洁优…...

【C语言】编译和链接

一、编译环境和运行环境 在ANSI C的任何一种实现中&#xff0c;存在着两个不同的环境&#xff1a; 1、翻译环境&#xff1a;在翻译环境中&#xff0c;其会通过编译和链接两个大的步骤&#xff0c;其中编译又分为了预处理&#xff08;这 个我们后面还会详细讲解&#x…...

Spark,IDEA编写Maven项目

IDEA中编写Maven项目 1.打开IDEA新建项目 2.选择java语言&#xff0c;构建系统选择Maven 3.IDEA中配置Maven 注&#xff1a;这些文件都是我们老师帮我们在网上找了改动后给我们的&#xff0c;大家可自行在网上查找 编写代码测试HDFS连接 1.在之前创建的pom.xml文件中添加下列…...

【HFP】蓝牙HFP服务层连接与互操作性核心技术研究

目录 一、互操作性设计哲学 二、服务级别连接&#xff08;SLC&#xff09;架构设计 2.1 连接建立流程总览 2.2 核心交互时序图 2.3 关键阶段技术实现 2.4 RFCOMM连接&#xff1a;通信的基石 2.5 特征交换与编解码协商 2.6 指示器状态同步 三、状态同步机制深度优化 3…...

VSCode使用Remote-SSH连接服务器时启动失败glibc不符合

问题 远程主机可能不符合glibc和libstdc VS Code服务器的先决条件 原因 VSCode更新后&#xff0c;如果服务端GLIBC低于v2.28.0版本将不再满足需求 查看服务端GLIBC版本&#xff1a; ~$ ldd --version ldd (Ubuntu GLIBC 2.23-0ubuntu11.3) 2.23解决 下载V1.85版本 下载链…...

InceptionNeXt:When Inception Meets ConvNeXt论文翻译

论文名称&#xff1a;InceptionNeXt:WhenInceptionMeetsConvNeXt 论文地址&#xff1a;https://arxiv.org/pdf/2303.16900.pdf 摘要&#xff1a; 受视觉Transformer(ViTs)长距离建模能力的启发&#xff0c;大核卷积因能扩大感受野、提升模型性能而受到广泛研究与应用&#x…...

windows下,cursor连接MCP服务器

1.下载并安装node 安装后&#xff0c;在cmd命令框中&#xff0c;输入命令node -v可以打印版本号&#xff0c;证明安装完成 2.下载MCP服务器项目 在MCP服务器找到对应项目&#xff0c;这里以server-sequential-thinking为例子 在本地cmd命令窗口&#xff0c;使用下面命令下载…...

从零开始:使用 kubeadm 部署 Kubernetes 集群的详细指南

使用kubeadmin 部署k8s集群 目录 硬件要求 前期准备 Master 检查 API 服务器证书 清理并重新初始化 查 kubeadm 初始化日志 配置 crictl 的 endpoint 硬件要求 主机名 ip 硬件最低要求 建议&#xff0c;跑的块 master 10.1.1.7 2核&#xff0c;2G 内存给个6G node2 …...

rancher 采用ingerss ssl 部署nginx+php项目

rancher 采用ingerss ssl 部署nginxphp项目 一、创建nginx dockerfile&#xff0c;上传到阿里云镜像仓库&#xff08;公有&#xff0c;不需要密码&#xff09; 二、 创建php7.4 dockerfile&#xff0c;需要必须扩展&#xff0c; 上传到阿里云镜像仓库&#xff08;公有&#x…...

开源聚合平台 Websoft9:开源创新已成为中小企业数字化转型、数据驱动企业的基础

引言&#xff1a;开源软件正在重塑企业数字化未来 根据2024年OpenLogic报告&#xff0c;94.57%的企业已使用开源软件&#xff0c;其中34.07%的机构加大了对开源技术的投入。开源软件凭借其灵活性、成本优势和生态协作能力&#xff0c;成为中小企业&#xff08;SMB)数字化转型的…...

IntelliJ IDEA 中通义灵码插件使用指南

IntelliJ IDEA 中通义灵码插件使用指南 通义灵码&#xff08;TONGYI Lingma&#xff09;是阿里云推出的一款基于通义大模型的智能编码辅助工具&#xff0c;支持 IntelliJ IDEA 等主流 IDE。它提供了代码补全、自然语言生成代码、单元测试生成、代码注释与解释等功能&#xff0…...

如何免费使用Meta Llama 4?

周六, Meta发布了全新开源的Llama 4系列模型。 架构介绍查看上篇文章。 作为开源模型,Llama 4存在一个重大限制——庞大的体积。该系列最小的Llama 4 Scout模型就拥有1090亿参数,如此庞大的规模根本无法在本地系统运行。 不过别担心!即使你没有GPU,我们也找到了通过网页…...

introduceHLSL

最近打算好好学习一下ue的shader&#xff0c;跟着下面的视频&#xff0c;打算每天至少更新一集 https://www.youtube.com/watch?vlsXB1PQdGx0&t494s 通过下面的蓝图方式我们就可以得到一个变化的材质 alpha参数的生成实际上就是下面的式子 custom节点允许直接的写入hlsl…...

Module模块化

导出&#xff1a;export关键字 export var color "red"; 重命名导出 在模块中使用as用导出名称表示本地名称。 import { add } from "./05-module-out.js"; 导入&#xff1a; import关键字 导入单个绑定 import { sum } from "./05-module-out.js&…...

使用 Rsync + Lsyncd 实现 CentOS 7 实时文件同步

文章目录 &#x1f300;使用 Rsync Lsyncd 实现 CentOS 7 实时文件同步前言介绍架构图&#x1f9f1;系统环境&#x1f527;Rsync配置&#xff08;两台都需安装&#xff09;关闭SELinux&#xff08;两台都需&#xff09; &#x1f4e6;配置目标端&#xff08;client&#xff09…...

软件工程第三章习题

一、选择题 1. (1)答案&#xff1a;D 解析&#xff1a;可行性研究是对项目在技术、经济、操作等多方面进行全面评估论证&#xff0c;也称为项目论证 。技术可行性研究、操作可行性研究、经济可行性研究只是可行性研究的部分内容&#xff0c;不能涵盖整体概念。 2. (2)答案&…...

基于ElasticSearch的向量检索技术实践

基于ElasticSearch的向量检索技术实践 作者&#xff1a;Tableau 原文地址&#xff1a;https://zhuanlan.zhihu.com/p/620260383 图片、视频、语音、文本等非结构化数据可以通过人工智能技术&#xff08;深度学习算法&#xff09;提取特征向量&#xff0c;然后通过对这些特征向量…...

Spring Boot 项目日志系统全攻略:Logback、Log4j2、Log4j与SLF4J整合指南

Spring Boot 项目日志系统全攻略&#xff1a;Logback、Log4j2、Log4j与SLF4J整合指南 日志系统是应用程序不可或缺的组成部分&#xff0c;良好的日志实践能极大提升开发调试和线上问题排查的效率。本文将全面介绍Spring Boot项目中各种日志框架的配置与使用方案&#xff0c;包…...

【设计模式】责任链模式

简介 很多公司都有请假的流程&#xff0c;当员工提交请假申请时&#xff0c;请求会沿着 组长 → 经理 → CEO 的链条传递&#xff0c;直到有对应层级的领导处理。 适用场景 一个请求需要多个对象中的一个或多个处理&#xff08;如审批流程、过滤器链&#xff09;。处理对象和…...

智能气候前沿:AI Agent结合机器学习与深度学习在全球气候变化驱动因素预测

全球气候变化已成为21世纪最严峻的环境挑战&#xff0c;其复杂的驱动因素如温室气体排放、气溶胶浓度、野火、海冰融化以及农业和生态系统变化等&#xff0c;交织影响着全球的气候格局。 第一&#xff1a;气候变化驱动因素与数据科学基础 1.1气候变化 全球气候变化 中国碳中…...

es 原生linux部署集群

背景 目的&#xff1a; 1. 理解不同部署方式的架构差异 2. 对比环境配置的复杂度 3. 评估性能与资源管理 4. 探索扩展性与高可用性 5. 学习安全与隔离机制 6. 实践监控与维护 7. 掌握混合部署与云原生场景 实验的最终目标 技能提升&#xff1a; 全面掌握Elasticsear…...