React-h5-calender

React-h5-calender react h5 日历使用

前言

大家好，我们在这篇文章中来分享一下react-h5-calendar 日历组件，实现一个自定义的日历组件
npm链接: https://www.npmjs.com/package/react-h5-comcalendar

效果图

下面展示一些 内联代码片。

// 安装组件依赖
yarn add react-h5-comcalendar# 或者 npm install react-h5-comcalendar
// 在main.js 或者引用页面引入组件
import  Calendar  from "react-h5-comcalendar"
// 引入样式
import 'react-h5-comcalendar/lib/styles.scss'
// 使用组件

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

下面展示一些具体使用内联代码片。

  {}}
    >