react使用Fullcalendar

news2024/11/26 22:28:43

前言:

最近在做项目时,遇到了需要用日历的项目。一开始考虑使用antd的日历组件。后来 调研技术库,发现了fullcalendar 库。经过对比 fullcalendar 更强大,更灵活。
在这里插入图片描述

其实 antd的日历组件 也不错,简单的需求用他也行。antd 的优点是文档清晰且完善。

安装需要的包:

npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

npm @fullcalendar/react 官网

Fullcalendar 官网

用法:

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

const events = [
  { title: 'Meeting', start: new Date() }
]

export function DemoApp() {
  return (
    <div>
      <h1>Demo App</h1>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView='dayGridMonth'
        weekends={false}
        events={events}
        eventContent={renderEventContent}
      />
    </div>
  )
}

// a custom render function
function renderEventContent(eventInfo) {
  return (
    <>
      <b>{eventInfo.timeText}</b>
      <i>{eventInfo.event.title}</i>
    </>
  )
}

效果图:
效果图
有什么问题可以查看文档:
fullcalendar 文档

使用心得:

文档查看:

因为文档是英文的,我的英文不好,只能借助 一些插件来翻译。建议使用edge浏览器来看。之前都是用 浏览器自带的翻译功能,但是 会直接把英文换成中文。很不友好,无法对照着来。
在这里插入图片描述
后来发现了一个 插件很好用:沉浸式翻译对的插件(沉浸式翻译插件地址)
这个直接在插件商店搜素就行,如果想在chrome上用就得科学上网或者看看这篇文章:
immersive-translate(沉浸式双语网页翻译扩展),解决谷歌翻译无法使用问题
翻以前:
翻以前截图

翻译后截图

自定义样式:

1.可以审查元素 强行覆盖其样式

.fc-daygrid-event {
  background-color: #4CAF50; /* 自定义事件背景色 */
  border-radius: 4px; /* 圆角 */
  color: white; /* 事件文本颜色 */
  padding: 5px; /* 内间距 */
}

2.fullcalendar/react 使用了 css 变量,可以用css变量来控制一些样式,甚至可以定制一个简易的主题。
一些 简单的 css变量
例如:边框颜色:–fc-border-color这个变量控制的,只需要在css/less/scss里加上:

--fc-border-color:red;
 --fc-today-bg-color:red; //选中的背景色

3.用fullcalenda 提供的主题系统
fullcalenda Theme

小结:我觉得 修改样式可以 配合 css变量和 找到其类名进行覆盖比较好(个人观点)。

不显示 周日、周六列

weekends=false 

设置语言:

设置成这个就显示成 周一 至 周五 默认就是 英文

 locale='zh-cn'// 设置语言

标题不想 要周字(我的需求),自定义dayHeaderContent

dayHeaderContent={(arg) => {
   // 自定义星期内容
   const days = ['日', '一','二', '三', '四', '五', '六']; // 星期的中文表示
   return days[arg.date.getDay()]; // 获取对应星期的中文名称
}}

自定义单元格内容:

dayCellContent={(data)=>{return "xx"}}

单元格点击dateClick(需要引入交互插件):

只加dateClick

 dateClick={(info) => {
                    console.log(info, "9086");
                }}

不管用还需要给plugins里加上interactionPlugin,这个是交互插件。最好把selectable={true}也加上

import interactionPlugin from "@fullcalendar/interaction"
plugins={[dayGridPlugin,interactionPlugin]}
selectable={true}

dateClick 文档

实战用法:

具体可参考:react使用Fullcalendar 实战用法

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

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

相关文章

LabVIEW过程控制实验平台

A3000实验平台通过LabVIEW开发&#xff0c;实现了过程控制的虚拟仿真与实时通信&#xff0c;显著提高了教学与实验的互动性和效率。该平台采用模块化设计&#xff0c;支持多种控制策略的实验教学&#xff0c;克服了传统实验设备的不足。项目背景 目前高校过程控制实验设备普遍…

腾讯会议pc端3.29.11开启悬浮窗口

之前是&#xff1a;pc端每次最小化&#xff0c;它就自动收回到任务栏里了 版本&#xff1a;3.29.11 解决办法&#xff1a; 打开腾讯会议&#xff0c;点击左上角的【头像】。 单击【设置】。 选择【显示当前说话者】来管理麦克风浮窗。 再进入会议&#xff0c;点击最小化一哈&…

聊一聊:ChatGPT搜索引擎会取代谷歌和百度吗?

当地时间 10 月 31 日&#xff0c;OpenAI 正式推出了 ChatGPT 搜索功能&#xff0c;能实时、快速获取附带相关网页来源链接的答案。这一重大升级标志着其正式向谷歌的搜索引擎霸主地位发起挑战。 本周五我们聊一聊&#xff1a; 欢迎在评论区畅所欲言&#xff0c;分享你的观点~ …

贪心算法习题其四【力扣】【算法学习day.21】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&am…

python实战项目52:Selenium爬取steam黑神话悟空评论

python实战项目52:Selenium爬取steam黑神话悟空评论 一、思路分析二、完整代码一、思路分析 Selenium爬取steam游戏评论的思路非常简单,初始化Chromedriver,然后打开评论页面,循环下拉滚动条,每下拉一次滚动条获取一次页面源代码,使用xpath解析数据并保存数据。本文的主…

Claude 3.5 新功能 支持对 100 页的PDF 图像、图表和图形进行可视化分析

Claude 3.5 Sonnet发布PDF图像预览新功能&#xff0c;允许用户分析长度不超过100页的PDF中的视觉内容。 此功能使用户能够轻松上传文档并提取信息&#xff0c;特别适用于包含图表、图形和其他视觉元素的研究论文和技术文档。 视觉PDF分析&#xff1a;用户现在可以从包含各种视觉…

【Qt c++】Qt内置图标

Qt内置图标 前言简例示例 前言 Qt内置图标封装在QStyle中&#xff0c;大概七十多个图标&#xff0c;可以直接拿来用。图标的大小&#xff1a;我认为 size 30 还是可以的. 简例 SP_TitleBarMenuButton, SP_TitleBarMinButton, SP_TitleBarMaxButton, SP_TitleBarCloseButton…

Redis 的使⽤和原理

第一章:初识 Redis 1.1盛赞 Redis Redis 是⼀种基于键值对&#xff08;key-value&#xff09;的 NoSQL 数据库&#xff0c;与很多键值对数据库不同的是&#xff0c;Redis 中的值可以是由 string&#xff08;字符串&#xff09;、hash&#xff08;哈希&#xff09;、list&…

【Clikhouse 探秘】ClickHouse 物化视图:加速大数据分析的新利器

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

atest v0.0.18 提供了强大、灵活的 HTTP API Mock 功能

atest 发布 v0.0.18 atest 是致力于帮助开发者持续保持高质量 API 的开源接口工具。 你可以在命令行终端或者容器中启动&#xff1a; docker run -p 8080:8080 ghcr.io/linuxsuren/api-testing:v0.0.18 亮点 在开源之夏 2024 中 atest 增加了基于 MySQL 的测试用例历史的支持HT…

深度了解flink(十) JobManager(4) ResourceManager HA

ResourceManager&#xff08;ZK模式&#xff09;的高可用启动流程 ResourceManager启动流程在DefaultDispatcherResourceManagerComponentFactory#create中 public DispatcherResourceManagerComponent create(Configuration configuration,ResourceID resourceId,Executor i…

Linux系统编程——信号的基本概念(信号产生于处理、可靠信号、可重入函数、SIGCHLD)

一、什么是信号 1、信号的定义 信号是UNIX和Linux系统响应某些条件而产生的一个事件&#xff0c;接收到该信号的进程会相应地采取一些行动。信号是软中断&#xff0c;通常信号是由一个错误产生的。但它们还可以作为进程间通信或修改行为的一种方式&#xff0c;明确地由一个进程…

节省50%人工录入时间!免费开源AI工具让法律文件数据提取更高效

法律行业痛点&#xff1a;处理大量的合同、诉讼材料和财务报告等文件是一项繁琐且耗时的工作。这些文件中的表格常包含关键信息&#xff0c;如费用清单、时效统计和条款列表等&#xff0c;手动录入和整理这些数据不仅效率低下&#xff0c;而且容易出错。表格识别技术&#xff0…

单智能体carla强化学习实战工程介绍

有三个工程&#xff1a; Ray_Carla: 因为有的论文用多进程训练强化学习&#xff0c;包括ray分布式框架等&#xff0c;这里直接放了一个ray框架的示例代码&#xff0c;是用sac搭建的&#xff0c;obs没用图像&#xff0c;是数值状态向量值&#xff08;速度那些&#xff09;。 …

消息队列面试——打破沙锅问到底

消息队列的面试连环炮 前言 你用过消息队列么&#xff1f;说说你们项目里是怎么用消息队列的&#xff1f; 我们有一个订单系统&#xff0c;订单系统会每次下一个新订单的时候&#xff0c;就会发送一条消息到ActiveMQ里面去&#xff0c;后台有一个库存系统&#xff0c;负责获取…

第02章 MySQL环境搭建

一、MySQL的卸载 如果安装mysql时出现问题&#xff0c;则需要将mysql卸载干净再重新安装。如果卸载不干净&#xff0c;仍然会报错安装不成功。 步骤1&#xff1a;停止MySQL服务 在卸载之前&#xff0c;先停止MySQL8.0的服务。按键盘上的“Ctrl Alt Delete”组合键&#xff0…

向量数据库指南》——解锁多模态RAG应用,引领智能问答新时代!

多模态 RAG 应用:解锁智能问答的新维度 在当今这个信息爆炸的时代,我们每天都需要处理海量的数据,这些数据以多种形式存在,包括文本、图像、音频和视频等。随着人工智能技术的飞速发展,尤其是大型语言模型(LLM)的广泛应用,我们越来越依赖于这些智能系统来理解和回应我…

【MySQL 保姆级教学】 复合查询--超级详细(10)

复合查询 1. 复合查询的作用2. 创建将进行操作的表2.1 员工表 emp2.2 部门表 dept2.3 薪资等级表 3. 基本查询回顾4. 多表查询4.1 多表查询的定义4.2 笛卡尔积4.3 内连接 inner join4.4 交叉连接 cross join4.5 左外连接 left join4.6 右外连接 right join4.7 自连接 5. 子查询…

飞桨首创 FlashMask :加速大模型灵活注意力掩码计算,长序列训练的利器

在 Transformer 类大模型训练任务中&#xff0c;注意力掩码&#xff08;Attention Mask&#xff09;一方面带来了大量的冗余计算&#xff0c;另一方面因其 O ( N 2 ) O(N^2) O(N2)巨大的存储占用导致难以实现长序列场景的高效训练&#xff08;其中 N N N为序列长度&#xff09;…

高电压、真差分信号采集的SAR ADC驱动电路设计

1 简介 本设计展示了一种用于驱动高压 SAR ADC 以实现高压全差分信号数据采集的解决方案。该差分信号可能具有广泛的共模电压范围&#xff0c;具体取决于放大器的电源和输入信号振幅。使用一个通用高压精密放大器来执行差分到单端信号转换&#xff0c;并以最高吞吐量驱动 10V 的…