react-h5-comcalendar

React-H5-Calendar组件使用文档

1. 安装组件

yarn add react-h5-comcalendar # 或者 npm install react-h5-comcalendar

2. 引入组件

import Calendar from "react-h5-comcalendar";

3. 引入样式

import 'react-h5-comcalendar/lib/styles.less';

5. 使用组件

<Calendar visible={visible}></Calendar>

6. 配置项

属性	默认参数	说明	类型
visible	false	是否显示	Boolean
themeColor	#3D7DE7	主题颜色(16进制)	String
selectBgColor	#E9F3FD	选中背景颜色(16进制)	String
modalCancel	()=> {}	点击取消	Function
ok	()=> {}	点击确定	Function
dateClick	()=> {}	点击日期	Function
defaultDate	[]	默认选中的日期	Array
type	day	日历类型	String
showToDay	true	是否显示今天	Boolean
showLunar	true	是否显示农历	Boolean
calendarTypeShow	true	是否显示日历类型	Boolean
typeList	["day", "week", "month"]	日历类型	Array
title	日期选择	标题	String
okText	确定	标题	String
cancelText	取消	标题	String
maskClose	true	是否点击遮罩层关闭	Boolean

swiperContainer高度 = calendar_day高度+20px * 6 calendar_day高度 = 60px

7. 插槽

<Calendar visible={visible}
  todayRender={(date) => {}}, // 自定义今天按钮
  cancelRender={() => {}}, // 自定义取消按钮
  prevYearrRender={() => {}}, // 自定义上一年按钮
  prevMonthRender={() => {}}, // 自定义上一月按钮
  nextMonthRender={()=> {}}, // 自定义下一月按钮
  nextYearRender={()=> {}}, // 自定义下一年按钮
  okRender={() => {}}, // 自定义确定按钮
  itemRender={() => {}}, // 自定义日期按钮
>
</Calendar>