react移动端h5端日历组件周日历月日历周视图月视图

造一个小轮子,核心文件不到三百行,一款基于react 的移动端 , mobile, h5 日历展示组件

demo

扫描二维码直接查看demo

直接打开浏览器查看 https://kokiy.github.io/react-h5-calendar/

react 移动端日历组件

1. 支持周视图,周日历
2. 支持月视图,月日历
3. 支持左右滑动切换月份
4. 支持上下滑动切换日历视图
5. 支持日历上打点标记
6. 基于dayjs处理日历逻辑

使用教程

yarn add react-h5-calendar

import { MobileCalendar } from &＃39;react-h5-calendar&＃39;
export default class Demo extends Component {render() {return (<MobileCalendaronDateClick&＃61;{date &＃61;> this.setState({ currentDate: date.format(&＃39;YYYY-MM-DD&＃39;) })}currentDate&＃61;{&＃39;2020-12-12&＃39;}/>)}
}


参数设置

markDates 参数说明

const markDates &＃61; [
{ color: &＃39;#459&＃39;, date: &＃39;2020-12-12&＃39;, markType: &＃39;circle&＃39; },
{ color: &＃39;#a8f&＃39;, markType: &＃39;dot&＃39;, date: &＃39;2020-12-23&＃39; },
{ color: &＃39;#a5f&＃39;, markType: &＃39;circle&＃39;, date: &＃39;2020-12-22&＃39; },
{ date: &＃39;2021-1-22&＃39; },
]


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