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

react-h5-calendar

git 库地址

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

demo

扫描二维码间接查看demo

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

react 挪动端日历组件

  1. 反对周视图,周日历
  2. 反对月视图,月日历
  3. 反对左右滑动切换月份
  4. 反对高低滑动切换日历视图
  5. 反对日历上打点标记
  6. 基于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 展现类型反对monthweek month
transitionDuration 切换日期的动画过渡工夫 0.3
onDateClick 日期点击回调 () => {}
onTouchStart 滑动开始回调 () => {}
onTouchMove 滑动过程中回调 () => {}
onTouchEnd 滑动完结回调 () => {}
markType 标记类型 反对dotcircle 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' },
]
  1. 单个日期不传markType 默认取传入的Marktype
  2. 单个日期不传color 默认是#f00

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理