react-h5-simple-calendar
简体中文 | English
一款基于 react 的移动端，h5 精简版日历展示组件。
react 移动端日历组件
使用教程
yarn add react-h5-simple-calendar | npm i react-h5-simple-calendar
import dayjs from 'dayjs';
import React, { useState } from 'react';
import { Calendar } from 'react-h5-simple-calendar';
const SimpleCalendar = () => {
const [currentDate, setCurrentDate] = useState(dayjs().format('YYYY-MM-DD'));
return (
<Calendar
onChange={(dateStr, date) => setCurrentDate(dateStr)}
showType="week"
disableView={false}
markDates={[
{ date: '2024-02-12', markType: 'circle' },
{ markType: 'dot', date: '2024-02-23' },
{ markType: 'circle', date: '2024-02-22' },
{ markType: 'dot', date: '2024-02-17' },
{ date: '2024-02-16' },
]}
markType="dot"
currentDate={currentDate}
onSlideChange={(e) => console.log('onSlideChange ', e)}
onToggleShowType={(e) => console.log('onToggleShowType ', e)}
/>
);
};
export default SimpleCalendar;参数设置
| 参数 | 说明 | 默认值 |
|---|---|---|
currentDate |
当前选择的日期（默认当天），搭配 onChange 使用。比如:2024-02-19
|
|
showType |
展示类型支持month 和 week
|
'month' |
transitionDuration |
切换日期的动画过渡时间 | 0.3 |
onChange |
日期选中回调 | (dateStr: string, date: dayjs.Dayjs) => {} |
onTouchStart |
滑动开始回调 | () => {} |
onTouchMove |
滑动过程中回调 | () => {} |
onSlideChange |
滑动结束回调 | ({ range: [string, string], date: string, dateStr: string }) => {} |
onToggleShowType |
切换月、周视图回调 | ({ showType: string, startTime: string, endTime: string }) => {} |
markType |
标记类型 支持dot和circle
|
'dot' |
markDates |
需要标记的日期数组 | [] |
disableView |
禁止切换月、周视图 | false |
language |
语言'zh-CN'、'en-US' | 'zh-CN' |
customHeader |
自定义日期头部（< 2024-02 >），boolean、({ dateStr, date }) => ReactNode | false |
markDates 参数说明
const markDates = [
{ color: '#459', date: '2024-01-02', markType: 'circle' },
{ color: '#a8f', markType: 'dot', date: '2023-12-31' },
{ color: '#a5f', markType: 'circle', date: '2024-02-05' },
{ date: '2024-02-06' },
];- 单个日期不传
markType默认取传入的Marktype - 单个日期不传
color默认是#168eef
赞助
