rmc-calendar

---

React Mobile Calendar Component (web)

Screenshots

Development

npm i 
npm start

Example

http://localhost:8021/examples/

online example: http://gem-mine.github.io/rmc-calendar/

install

docs

Usage

1import React, { Component } from 'react';
2
3import { RMCCalendar } from '@gem-mine/rmc-calendar';
4import '@gem-mine/rmc-calendar/assets/index.css';
5
6class App extends Component {
7  constructor(props) {
8    super(props);
9    this.state = {
10      visible: false,
11    };
12  }
13
14  setVisiable = () => {
15    this.setState({
16      visible: !this.state.visible,
17    });
18  }
19
20  render() {
21    return (
22      <div className="App">
23        <Calendar
24          visible={this.state.visible}
25          onCancel={this.setVisiable}
26          onOk={this.setVisiable}
27        />
28      </div>
29    );
30  }
31}
32
33export default App;

API

Calendar props

1interface PropsType {
2    /** 本地化 */
3  locale?: Models.Locale;
4  /** 关闭时回调 */
5  onCancel?: () => void;
6  /** 清除时回调 */
7  onClear?: () => void;
8  /** 确认时回调 */
9  onOk?: (startDateTime?: Date, endDateTime?: Date) => void;
10  /** (web only) 样式前缀，default: rmc-calendar */
11  prefixCls?: string;
12  /** 附加样式名称, default: '' */
13  className?: string;
14  style?: React.CSSProperties;
15  /** header title, default: {locale.title} */
16  title?: string;
17  /** 选择类型，default: range，one: 单日，range: 日期区间 */
18  type?: 'one' | 'range';
19  /** 是否显示，default: false */
20  visible?: boolean;
21  /** 选中日期, 开始时间, 结束时间 */
22  value?: SelectDateType;
23  /** 默认展示，开始时间、结束时间 */
24  defaultValue?: SelectDateType;
25  /** 是否采用滑动翻页模式 */
26  swiper?: boolean;
27  /** 是否在日期区间模式显示起/止信息 */
28  showBeginEndInfo?: boolean;
29
30  // CalendarPanel
31  /** 显示开始日期，default: today */
32  defaultDate?: Date;
33  /** 自定义内容追加到单元格内 */
34  renderDateCellExtra?: (date: Date) => Models.ExtraData | void;
35  /** 自定义内容覆盖单元格 */
36  renderDateFullCell?: (data: Models.CellData) => React.ReactNode | void;
37  /** 自定义确认框 */
38  renderConfirm?: (data?: Models.ConfirmParams) => Models.ConfirmPanelData;
39  /** 无限滚动优化（大范围选择），default: false */
40  infinite?: boolean;
41  /** 初始化月个数，default: 6 */
42  initalMonths?: number;
43  /** 可显示日期 */
44  validRange?: [Date | undefined, Date | undefined];
45  /** 不可选日期 */
46  disabledDate?: (current: Date) => boolean;
47  /** 设置月起始日(1-28)，default: 1 */
48  firstDayOfMonth?: number;
49  /** 设置周起始日(0-6)，default: 0 */
50  firstDayOfWeek?: number;
51  /** 选择日期回调，如果有返回值，选择范围将使用返回值 */
52  onSelect?: (date: Date, state?: [Date | undefined, Date | undefined]) => SelectDateType | void;
53}

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-calendar is released under the MIT license.