react使用Fullcalendar

前言:

最近在做项目时,遇到了需要用日历的项目。一开始考虑使用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><FullCalendarplugins={[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.rhkb.cn/news/463338.html

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

相关文章

Golang--函数、包、defer、系统函数、内置函数

1、何为函数 函数作用&#xff1a;提高代码的复用型&#xff0c;减少代码的冗余&#xff0c;提高代码的维护性 函数定义&#xff1a;为完成某一功能的程序指令(语句)的集合,称为函数。 语法&#xff1a; func 函数名(形参列表)(返回值类型列表){ //执行语句 //…… return …

Chrome和Firefox如何保护用户的浏览数据

在当今数字化时代&#xff0c;保护用户的浏览数据变得尤为重要。浏览器作为我们日常上网的主要工具&#xff0c;其安全性直接关系到个人信息的保密性。本文将详细介绍Chrome和Firefox这两款主流浏览器如何通过一系列功能来保护用户的浏览数据。&#xff08;本文由https://chrom…

如何在Linux系统中使用SSH进行安全连接

如何在Linux系统中使用SSH进行安全连接 SSH简介 安装SSH 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动SSH服务 验证SSH是否安装成功 SSH配置 配置监听端口 配置登录方式 SSH客户端 安装SSH客户端 使用SSH客户端 SSH密钥认证 生成SSH密钥对 复制公钥到远程服务器…

ElasticSearch - Bucket Selector使用指南

文章目录 官方文档Bucket Selector1. 定义2. 工作原理3. 使用场景与示例使用场景官方案例示例2 4. 注意事项5. 总结 官方文档 https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations.html Bucket Selector https://www.elastic.co/guide/en/…

RHCE——笔记

Web服务器 1&#xff0c;web服务器简介 &#xff08;1&#xff09;什么是www 是全球信息广播的意思。通常说的上网就是使用 www 来查询用户 所需要的信息。 www 可以结合文字、图形、影像以及声音等多媒体&#xff0c;并通过可以让鼠标单击超链接的方式将信息以Internet 传递…

Unity XR Interaction Toolkit 开发教程(1):OpenXR 与 XRI 概述【3.0 以上版本】

文章目录 &#x1f4d5;Unity XR 开发架构&#x1f50d;底层插件&#xff08;对接硬件&#xff09;&#x1f50d;高层 SDK&#xff08;面向应用交互层&#xff09; &#x1f4d5;OpenXR&#x1f4d5;XR Interaction Toolkit&#x1f50d;特点&#x1f50d;XRI 能够实现的交互类…

HarmonyOS:@Watch装饰器:状态变量更改通知

Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变&#xff0c;可以使用Watch为状态变量设置回调函数。 说明 从API version 9开始&#xff0c;该装饰器支持在ArkTS卡片中使用。 从API version 11开始&#xff0c;该装饰器支持在元服务中使用。 一、概…

AIGC对传统内容创作行业的冲击

文章目录 引言一、AIGC的概念1.1 AIGC的工作原理 二、AIGC对内容创作行业的影响2.1 提高创作效率2.2 降低创作门槛2.3 改变内容创作的形式 三、AIGC带来的挑战3.1 版权和道德问题3.2 内容质量的参差不齐3.3 人类创作者的角色变化 四、AIGC的应用场景4.1 新闻行业4.2 市场营销4.…

Linux 下执行定时任务之 Systemd Timers

不知道 ECS 因为什么缘故&#xff0c;上面安装的 MySQL 服务老是不定期挂掉&#xff0c;本来想通过 Linux 得 Cron 配置个半小时的定时检测任务&#xff0c;结果一直没有执行&#xff0c;因此又尝试使用了 Systemd Timers 进行了重新配置&#xff0c;简要做个记录。 Systemd Ti…

Java已死,大模型才是未来?

作者&#xff1a;不惑_ 引言 在数字技术的浪潮中&#xff0c;编程语言始终扮演着至关重要的角色。Java&#xff0c;自1995年诞生以来&#xff0c;便以其跨平台的特性和丰富的生态系统&#xff0c;成为了全球范围内开发者们最为青睐的编程语言之一 然而&#xff0c;随着技术的…

C语言第10节:详解操作符

1. 运算符的分类 运算符是C语言中的基本组成部分&#xff0c;用于执行各种操作。以下是常见运算符的详细分类&#xff1a; 1.1. 算术操作符 这些用于执行基本的数学运算&#xff1a; &#xff1a;加法- &#xff1a;减法* &#xff1a;乘法/ &#xff1a;除法% &#xff1a;…

Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)

项目源码&数据源获取 利用Python实现全国岗位招聘信息可视化分析 项目背景&#xff1a; 1.为企业招聘决策提供科学的依据和参考&#xff0c;可以帮助人力资源部门、招聘机构和求职者了解当前的就业形势、行业趋势和人才需求&#xff0c;从而做出更明智的招聘和求职决策。…

群控系统服务端开发模式-应用开发-本地上传工厂及阿里云上传工厂开发

记住业务流程图&#xff0c;要不然不清楚自己封装的是什么东西。 一、本地工厂开发 在根目录下extend文件夹下Upload文件夹下channel文件夹中&#xff0c;我们修改LocalUpload业务控制器。具体代码如下&#xff1a; <?php /*** 本地上传工厂* User: 龙哥 三年风水* Date: …

智能座舱相关术语全解及多模态交互在智能座舱中的应用

文章目录 座舱相关术语全解1. 智能座舱2. UFS3. 多模态交互4. 3D虚拟引擎5. AR/VR6. GNSS7. TTS8. DPU9. 摄像头10. 屏幕/显示器11. 音频12. 无线连接13. 其他组件 多模态交互在智能座舱中有以下一些应用 座舱相关术语全解 1. 智能座舱 智能座舱&#xff08;intelligent cabi…

Linux中SPI

参考资料 https://www.cnblogs.com/aaronLinux/p/6219146.html1.SPI 2.SPI传输 2.1传输示例 首先&#xff0c;CS0拉低选中的SPI Flash , 然后在每个时钟周期&#xff0c; DO输出对应的电平。 SPI FLASH会在每个时钟的上升沿读取D0的电平。2.2SPI模式 根据SCK的电平以及数据在…

基于SSM+小程序的计算机实验室排课与查询管理系统(实验室2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 1、管理员功能有个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;实验室信息管理&#xff0c;实验室预约管理&#xff0c;取消预约管理&#xff0c;实验课程管理&#xff0…

Netty核心源码与优化

1.Netty的优化 1.1 使用EventLoop的任务调度 直接使用 channel.writeAndFlush(data) 可能会导致线程切换&#xff0c;这是因为如果当前线程并不是该 Channel 所绑定的 EventLoop 线程&#xff0c;那么 writeAndFlush() 操作会将任务重新提交给关联的 EventLoop 线程执行&#…

selinux介绍和Linux中的防火墙

selinux 1、selinux的说明 2、selinux的工作原理 3、selinux的启动、关闭与查看 防火墙 1、什么是防火墙 2、iptables &#xff08;1&#xff09;iptables介绍 参数说明 3、firewalld firewalld-cmd的参数说明

JavaScript。—关于语法基础的理解—

一、程序控制语句 JavaScript 提供了 if 、if else 和 switch 3种条件语句&#xff0c;条件语句也可以嵌套。 &#xff08;一&#xff09;、条件语句 1、单向判断 &#xff1a; if... &#xff08;1&#xff09;概述 < if >元素用于在判断该语句是否满足特定条…

yarn 下载安装、下载依赖、通过 vscode 运行服务(Windows11)

目录 yarn工具前置要求&#xff1a;安装node.js并配置好国内镜像源下载安装下载依赖特别的&#xff1a; 启动服务 yarn 工具 系统&#xff1a;Windows 11 前置要求&#xff1a;安装node.js并配置好国内镜像源 参考&#xff1a;本人写的《node.js下载、安装、设置国内镜像源…