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