0.0.4 • Published 4 years ago
react-clock-calendar v0.0.4
react-clock-calendar
百日打卡日历组件
how to use
import React from 'react';
import Calendar from 'react-clock-calendar';
import 'react-clock-calendar/dist/main/index.min.css';
const App = () => {
const CalendarProps = {
today: '2020-05-20',
durationDay: ['2020-04-28', '2020-06-03'],
initData: {
'2020-04-28': 1,
'2020-04-29': 1,
'2020-04-30': 1,
'2020-05-01': 1,
'2020-05-02': 1,
'2020-05-03': 1,
'2020-05-04': 1,
'2020-05-05': 0,
'2020-05-06': 1,
'2020-05-07': 1,
'2020-05-08': 1,
'2020-05-09': 1,
'2020-05-10': 1,
'2020-05-11': 1,
'2020-05-12': 1,
'2020-05-13': 0,
'2020-05-14': 0,
'2020-05-15': 1,
'2020-05-16': 1,
'2020-05-17': 1,
'2020-05-18': 1,
'2020-05-19': 1,
'2020-05-20': 2,
},
prevImg: {
active: 'https://user-gold-cdn.xitu.io/2020/6/1/1726dd5044b5b708?w=72&h=72&f=png&s=1556',
unActive: 'https://user-gold-cdn.xitu.io/2020/6/1/1726dd580a69917a?w=72&h=72&f=png&s=1452',
},
nextImg: {
active: 'https://user-gold-cdn.xitu.io/2020/6/1/1726dd5d09e9b149?w=72&h=72&f=png&s=1572',
unActive: 'https://user-gold-cdn.xitu.io/2020/6/1/1726dd6312f7941e?w=72&h=72&f=png&s=1433',
},
handleCurrentDay: () => {},
};
return (
<div>
<Calendar {...CalendarProps} />
</div>
);
};
export default App;
Props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
prevImg | prevImg | 必填 | 无 |
nextImg | nextImg | 必填 | 无 |
today | 今天日期 | 必填 | 无 |
durationDay | 活动时间范围 | 必填 | 无 |
initData | 初始化日期数据 | 必填 | 无 |
handleCurrentDay | 点击回调 | 必填 | 无 |
介绍
rem 布局