1.1.5 • Published 5 months ago
react-h5-comcalendar v1.1.5
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>