基于React实现日历组件详细教程

前言

日历组件是常见的日期时间相关的组件,围绕日历组件设计师做出过各种尝试,展示的形式也是五花八门。但是对于前端开发者来讲,主要我们能够掌握核心思路,不管多么奇葩的设计我们都能够把它做出来。

本文将详细分析如何渲染一个简单的日历组件。

步骤

计算每个月中具体包含的日期

因为日历需要把当前月的每一天都展示出来,展示的前提是我们能够知道当前月具体都有哪些日子。那么如何优雅的获取每个月所有的天呢?

为了能够更方便的操作时间,我们需要引入dayjs 工具库,这也是我们手写日历组件唯一需要的工具库。

npm install dayjs

接下来我们实现一个工具方法,方法的目的是当我们传入年、月,就会返回当前月份的所有天。

import dayjs from "dayjs";export const getDaysOfMonth = (year: number, month: number) => {const firstDayOfMonth = dayjs(`${year}-${month}-1`);const lastDayOfMonth = dayjs(`${year}-${month + 1}-1`).subtract(1, "day");const days = [];let tempDate = firstDayOfMonth;while (tempDate.isBefore(lastDayOfMonth) || tempDate.isSame(lastDayOfMonth)) {days.push(tempDate);tempDate = tempDate.add(1, "day");}return days;
};

我们输出一下2023-08有哪些日子,并且简单渲染出来看看效果

function App() {const days = getDaysOfMonth(2023, 8);// 控制台打印days.forEach((day) => console.log(day.format("YYYY-MM-DD")));return (<div className="App">{days.map((day) => {return <div>{day.format('DD')}</div>;})}</div>);
}

在这里插入图片描述
在这里插入图片描述

以周为单位分组日期

  1. 首先我们先计算出日历分组标题,也就是周一,周二 … 周日
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");const weekTitles = useMemo(() => {return [...Array(7)].map((_, weekInx) => {return dayjs().day(weekInx);});}, []);// 日历标题渲染
<div className="calendar-title">{weekTitles.map((title) => {return <div>{title.format("ddd")}</div>;})}
</div>
  1. 对于当月所有的日期,每7天一组进行分组,也就是共分成7列
<div className="calendar-content">{days.map((day) => {return <div>{day.format("DD")}</div>;})}
</div>
  1. 加上对应的样式
.calendar {display: flex;flex-direction: column;width: 400px;
}.calendar-title {display: grid;grid-template-columns: repeat(7, 1fr);padding-bottom: 8px;
}.calendar-content {width: 100%;display: grid;grid-template-columns: repeat(7, 1fr);
}
  1. 看看效果
    在这里插入图片描述

猛的一看好像完成了,但是仔细检查会发现,2023年8月1号是周二,我们渲染出来的却是周日。这肯定是不对的,那么问题出在哪儿呢?

由于我们是通过grid布局来渲染日期数组,数组的第一位数据是8月1号,所以就成了上面图中的效果。所以我们得想办法将每个月1号前的日期也补全直到每周周日。

让我们改造一下获取日期的工具方法getDaysOfMonth ,下面代码是最终改造完成后的。

export const getDaysOfMonth = (year: number, month: number) => {let firstDayOfMonth = dayjs(`${year}-${month}-1`);let lastDayOfMonth = dayjs(`${year}-${month + 1}-1`).subtract(1, "day");**// 开始补全第一天前的日期while (firstDayOfMonth.day() !== 0) {firstDayOfMonth = firstDayOfMonth.subtract(1, "day");}// 开始补全最后一天后的日期while (lastDayOfMonth.day() !== 6) {lastDayOfMonth = lastDayOfMonth.add(1, "day");}**const days = [];let tempDate = firstDayOfMonth;while (tempDate.isBefore(lastDayOfMonth) || tempDate.isSame(lastDayOfMonth)) {days.push(tempDate);tempDate = tempDate.add(1, "day");}return days;
};

在这里插入图片描述

可以看出我们已经正确的渲染出了日历,只是样式看起来比较简陋。

日历支持切换月份

上面的结果是我固定渲染了2023年8月的日历,大多数的日历是需要支持月份切换的,甚至有的日历设计是需要支持用户上下滚动就能够显示对应的月份。我们先简单实现通过按钮点击支持日历月份的切换。

  1. 显示当前月份(日历顶部显示档期月份)
// tsx
<div className="calendar-month"><div className="calendar-month-switch">{"<"}</div><div>{month.format("MMM YYYY")}</div><div className="calendar-month-switch">{">"}</div>
</div>// css
.calendar-month {display: flex;align-items: center;justify-content: space-between;padding: 16px;
}.calendar-month-switch {display: flex;align-items: center;justify-content: center;height: 24px;width: 24px;cursor: pointer;
}

简单看看效果

在这里插入图片描述

  1. 支持点击切换月份

从上图可以看到,月份两边有两个「箭头」按钮,接下来我们在这两个按钮上绑定事件,用来切换不同的月份

// 切换月份事件,-1 代表前一个月,1代表后一个月
const onMonthSwitch = (action: number) => {setMonth((month) => {return month.add(action, "month");});};<div className="calendar-month"><div className="calendar-month-switch" onClick={()=> onMonthSwitch(-1)}>{"<"} </div> <div>{month.format("MMM YYYY")}</div><div className="calendar-month-switch" onClick={()=> onMonthSwitch(1)}>{">"}</div>
</div>

在这里插入图片描述

小节总结

本文详细的记录了一个最简单的日历组件的实现过程,感兴趣但是之前还没有实现过日历的同学可以直接下载代码试试,希望对大家有所启发。也可以直接访问https://react-calendar-training.vercel.app/看成品效果。

由于设计师脑洞的千变万化,日历的展现形式也各不相同,后续我还将继续记录更多形式的日历实现过程,感兴趣的同学敬请期待。有任何问题请留言,如果对你有帮助,请帮忙点个赞🦉

相关链接

  1. 源码

    https://github.com/levenx/react-calendar-training

  2. 在线DEMO效果

    https://react-calendar-training.vercel.app

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

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

相关文章

【Python原创毕设|课设】基于Python Flask的上海美食信息与可视化宣传网站项目-文末附下载方式以及往届优秀论文,原创项目其他均为抄袭

基于Python Flask的上海美食信息与可视化宣传网站&#xff08;获取方式访问文末官网&#xff09; 一、项目简介二、开发环境三、项目技术四、功能结构五、运行截图六、功能实现七、数据库设计八、源码获取 一、项目简介 随着大数据和人工智能技术的迅速发展&#xff0c;我们设…

解决Oracle中XML插入数据时的空格问题

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

2.含电热联合系统的微电网运行优化

含电热联合系统的微电网运行优化 MATLAB代码&#xff1a;含电热联合系统的微电网运行优化 关键词&#xff1a;微网 电热联合系统 优化调度 参考文档&#xff1a;《含电热联合系统的微电网运行优化》完全复现 仿真平台&#xff1a;MATLAB yalmipcplex [火]主要内容&#xf…

k8s 常用命令(三)

1、查看版本信息&#xff1a;kubectl version [rootmaster ~]# kubectl version [rootmaster ~]# kubectl version Client Version: version.Info{Major:"1", Minor:"21", GitVersion:"v1.21.3", GitCommit:"ca643a4d1f7bfe34773c74f7952…

JAVA开发环境接口swagger-ui使用总结

一、前言 swagger-ui是java开发中生产api说明文档的插件&#xff0c;这是后端工程师和前端工程师联调接口的桥梁。生成的文档就减少了很多没必要的沟通提高开发和测试效率。 二、 swagger-ui的使用 1、引入maven依赖 <dependency><groupId>io.springfox</grou…

cpolar+JuiceSSH实现手机端远程连接Linux服务器

文章目录 1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? cpolarJuiceSSH 实现手机端远程连接Linux虚拟机(内网穿透,手机端连接Linux虚拟机) …

keepalived+lvs(DR)(四十六)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、作用 二、调度器配置 三、web节点配置 一、作用 使用keepalived解决lvs的单点故障 高可用集群 二、调度器配置 安装keepalived yum install -y k…

评测PlayStation Portal:价格、设计、连接选项等

PlayStation Portal发出PlayStation手持设备返回的信号。这款新设备最初在2023年3月的PlayStation Showcase上被宣布为Project Q&#xff0c;它将允许你通过强大的Wi-Fi信号在任何地方播放最好的PS5游戏。 虽然PlayStation Portal可能不是PlayStation Portable和PlayStation G…

leetcode几个数组题

数组理论基础 数组是存放在连续内存空间上的相同类型数据的集合 因为数组的在内存空间的地址是连续的&#xff0c;所以我们在删除或者增添元素的时候&#xff0c;就难免要移动其他元素的地址 二分查找 移除元素 有序数组的平方 209.长度最小的子数组

jenkins 日志输出显示时间戳的方式

网上很多方式比较片面&#xff0c;最新版插件直接使用即可无需更多操作。 使用方式如下&#xff1a; 1.安装插件 Timestamper 2.更新全局设置 系统设置-找到 Timestamper 勾选 Enabled for all Pipeline builds 也可修改时间戳格式。 帮助信息中显示 When checked, timesta…

马原——5.两大总特征(辩证法)

两大总特征是解释了世界是怎样存在的。 三大规律是对两大总特征的进一步细化 对立统一规律解释了世界是怎样联系的&#xff0c;为什么发展 量变质变规律解释了怎样发展 否定之否定规律那里发展 五对基本范畴解释了联系和发展环节上的逻辑 客观性&#xff1a;不以人的意志为转…

使用easyExcel导入导出Date类型的转换问题

起因&#xff1a;在业务需求上需要将Excel表中的日期导入&#xff0c;存储到数据库中&#xff0c;但是entity中的日期类型使用Date来接收&#xff0c;这样导致时间精确到秒。这时&#xff0c;即使使用DateTimeFormat("yyyy-MM-dd")也无法成功转换&#xff0c;会报如下…

SpringBoot案例-配置文件-@ConfigurationProperties

问题分析 在往期的配置参数的文章中&#xff0c;对于阿里云OSS的参数时设置在yml配置文件中&#xff0c;然后使用Value&#xff08;”${}“&#xff09;对参数进行赋值&#xff0c;具体如下&#xff1a; 此种方法比较繁琐 问题解决 使用注解 Data 为变量自动生成get/set方…

2023国赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

MyBatis进阶:告别SQL注入!MyBatis分页与特殊字符的正确使用方式

目录 引言 一、使用正确的方式实现分页 1.1.什么是分页 1.2.MyBatis中的分页实现方式 1.3.避免SQL注入的技巧 二、特殊字符的正确使用方式 2.1.什么是特殊字符 2.2.特殊字符在SQL查询中的作用 2.3.如何避免特殊字符引起的问题 2.3.1.使用CDATA区段 2.3.2.使用实体引…

怎么做出老板看得懂的财务数据分析报表?

财务数据分析报表的主要作用就是为决策提供必不可少的数据信息&#xff0c;让老板以及管理层在充分了解企业现金流情况、债务能力、还债能力、进账情况等财务信息后&#xff0c;更科学地做出运营管理决策。因此&#xff0c;财务数据分析报表必须做得直观易懂&#xff0c;毕竟不…

Qt与电脑管家3

1.ui页面设计技巧 最外面的widget&#xff1a; 上下左右的margin都置相同的值 这里有4个widget&#xff0c;做好一个后&#xff0c;后面3个可以直接复制.ui文件&#xff0c;然后进行微调即可。 2.现阶段实现的效果&#xff1a; 3.程序结构&#xff1a; btn1--->btn btn1---…

【第三阶段】kotlin语言的内置函数takeif

package Stage3fun main() {println(checkPermission("root","123")) }//检查校验 //username.takeif{true/false} true:返回username本身 false:返回nullfun checkPermission(userame:String,pwd:String):String{return userame.takeIf { permissionSy…

【QT5-自我学习-线程qThread移植与使用-通过代码完成自己需要功能-移植小记3】

【QT5-自我学习-线程qThread移植与使用-通过代码完成自己需要功能-移植小记3】 1、前言2、实验环境3、自我总结&#xff08;1&#xff09;文件的编写&#xff08;2&#xff09;信号与槽的新理解&#xff08;3&#xff09;线程数据的传递 4、移植步骤第一步&#xff1a;添加新文…

4、Spring_IOC注解开发

IOC 注解开发 版本了解 2.0版本时开始支持注解开发&#xff08;2.0之前就是昨天学习的纯 xml 操作&#xff09;2.5版本才完善3.0版本支持纯注解开发 1.注解&xml配置Bean 1.1配置用户mapper 配置 mapper public interface UserMapper {void save(); }配置 mapper 实现类…