关于前端:react-移动端-h5-端日历组件-周日历-月日历

react-h5-calendar

git 库地址

造一个小轮子,外围文件不到三百行,一款基于react 的挪动端 , mobile, h5 日历展现组件

demo

扫描二维码间接查看demo

间接关上浏览器查看 https://kokiy.github.io/react...

react 挪动端日历组件

反对周视图,周日历
反对月视图,月日历
反对左右滑动切换月份
反对高低滑动切换日历视图
反对日历上打点标记
基于dayjs解决日历逻辑

应用教程

yarn add react-h5-calendar

import { MobileCalendar } from 'react-h5-calendar'export default class Demo extends Component { render() {   return (     <MobileCalendar       onDateClick={date => this.setState({ currentDate: date.format('YYYY-MM-DD') })}       currentDate={'2020-12-12'}     />   ) }}

参数设置

参数	阐明	默认值
`currentDate`	以后抉择的日期比方`2020-12-12`	'当天'
`showType`	展现类型反对`month` 和 `week`	`month`
`transitionDuration`	切换日期的动画过渡工夫	`0.3`
`onDateClick`	日期点击回调	`() => {}`
`onTouchStart`	滑动开始回调	`() => {}`
`onTouchMove`	滑动过程中回调	`() => {}`
`onTouchEnd`	滑动完结回调	`() => {}`
`markType`	标记类型反对`dot`和`circle`	`dot`
`markDates`	须要标记的日期数组	`[]`

### markDates 参数阐明

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

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