React移动端h5日历组件react-h5-calendar周日历月日历周视图月视图自定义标记点

React移动端h5日历组件能用的插件不多，不想自己手写，只能使用插件了。react-h5-calendar还不错，长的不丑，切换也流畅。

文档：

github简易介绍：https://github.com/kokiy/react-h5-calendar

另外补充：react-hash-calendar插件文档
github详细地址：https://github.com/TangSY/react-hash-calendar

DEMO：（实际不抖）

查看：

或

浏览器打开：https://kokiy.github.io/react-h5-calendar/calendar

参数配置：

支持周视图,周日历（参数disableWeekView禁用周视图）
支持月视图,月日历
支持左右滑动切换月份
支持上下滑动切换日历视图（参数disableWeekView禁用周视图）
支持日历上打点标记（当前、标记2种）
基于dayjs处理日历逻辑

参数设置

参数	说明	默认值	备注
currentDate	当前选择的日期	今天	格式：2022-02-02
showType	展示类型（参数：month 和 week）	month	disableWeekView={true} 禁用：周视图、上下滑动收缩
transitionDuration	切换日期的动画过渡时间（单位：秒）	0.3
markType	标记类型（参数：dot和circle）	dot	可根据标记点样式追加伪元素自定义样式
markDates	需要标记的日期数组	[]
disableWeekView	禁用周视图	false	disableWeekView={true} 禁用：周视图、上下滑动收缩
onDateClick	日期点击回调	(e)=>{}	日期对象信息
onTouchStart	滑动开始回调	(e)=>{}
onTouchMove	滑动过程中回调	(e)=>{}
onTouchEnd	滑动结束回调	(e)=>{}

markDates 参数说明

const markDates = [{ color: '#459', date: '2021-12-12', markType: 'circle' },{ color: '#a8f', markType: 'dot', date: '2021-12-23' },{ color: '#a5f', markType: 'circle', date: '2021-12-22' },{ date: '2022-1-22' },
]

单个日期不传markType 默认取传入的Marktype
单个日期不传color 默认是#f00

disableWeekView 参数说明

设为true时。禁用：周视图、上下滑动收缩。可以锁定月视图日历

实战案例：

可以自定义，有点考验css基本功。

核心代码附带：

js部分：

// 监听当前月份const [calendarOperate, setCalendarOperate] = useState('');// 日历滑动function onCalendarDateTouchEnd() {setTimeout(() => {const getHTML = document.getElementsByClassName("calendar-operate")[0]?.childNodes[1]?.innerHTML;setCalendarOperate(getHTML)})}{/* 日历 */}<div className="calendar"><CalendardisableWeekView={true}markDates={planList}onDateClick={onCalendarDateClick}onTouchEnd={onCalendarDateTouchEnd} //用于拼接全日期 - 跳转页面带参用/></div>

calendar.less部分： 可以直接复制拿去用，专门抽离用于日历样式重置。
我的项目用了postcss插件，自动px转vw。可以根据设计稿1:1写死单位。

.react-h5-calendar {padding-bottom: 30px;.calendar-operate {width: 686px;height: 108px;background: #fff;padding: 0 42px;div {font-size: 32px;font-weight: bold;color: #333333;line-height: 44px;}.icon {justify-content: end;img {height: 24px;}}}.calendar-head {font-size: 32px;color: #333333;line-height: 44px;.head-cell {padding: 36px 34px;margin-bottom: 20px;}}.week-mode {height: 120px !important;}.calendar-body {height: 660px;.month-cell {.day-cell {width: 98px;height: 88px;font-size: 32px;font-weight: bold;color: #333333;line-height: 44px;position: relative;z-index: 20;margin-bottom: 20px;.day-text {width: 100%;height: 100%;align-items: start;padding-top: 8px;}.current-day {width: 56px;height: 56px;background: #008AFF;padding-top: 0;align-items: center;margin-top: -30px;}.circle-mark {width: 98px;height: 100%;background: rgba(26, 182, 107, 0.1);border-radius: 8px;border: none;position: relative;}.circle-mark::before,.dot-mark::before {content: '';position: absolute;top: 8px;left: 20px;width: 12px;height: 12px;background: #1AB66B;border-radius: 100%;}.dot-mark {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 8px;background: rgba(255, 143, 33, 0.1) !important;z-index: -1;}.dot-mark::before {background: #FF8F21;}.dot-mark::after,.circle-mark::after {content: '复诊';width: 100%;height: 34px;font-size: 24px;font-weight: 400;color: #333333;line-height: 34px;position: absolute;bottom: 8px;left: 0;text-align: center;}}}}.bottom-operate {display: none;img {height: 5vw;}}.dateActive {.day-text {width: 56px !important;height: 56px !important;background: linear-gradient(180deg, #FF334B 0%, #FF9B9B 100%) !important;padding-top: 0 !important;align-items: center !important;margin-top: -30px !important;border-radius: 50% !important;color: #fff;}.circle-mark::before, .circle-mark::after, .dot-mark::before, .dot-mark::after{display: none !important;}.dot-mark{display: none !important;}}
}

其他：

有兴趣可以看看其他相关博客

react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw：https://blog.csdn.net/weixin_44461275/article/details/122490874