rmc-calendar

---

React Mobile Calendar Component (web)

Screenshots

Development

npm i 
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/m-calendar/

react-native (TBC)

./node_modules/rc-tools run react-native-init
npm run watch-tsc
react-native start
react-native run-ios

install

docs

Usage

1import React, { Component } from 'react';
2
3import { Calendar } from 'rmc-calendar';
4import '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          onConfirm={this.setVisiable}
27        />
28      </div>
29    );
30  }
31}
32
33export default App;

API

Calendar props

1interface PropsType {
2    /** enter direction，default: vertical */
3    enterDirection?: 'horizontal' | 'vertical';
4    /** locale */
5    locale?: GlobalModels.Locale;
6    onCancel?: () => void;
7    onConfirm?: (startDateTime?: Date, endDateTime?: Date) => void;
8    /** choose time，default: false */
9    pickTime?: boolean;
10    /** (web only) prefix class，default: rmc-calendar */
11    prefixCls?: string;
12    /** shortcut render, need showShortcut: true */
13    renderShortcut?: (select: (startDate?: Date, endDate?: Date) => void) => React.ReactNode;
14    /** show header, default: true */
15    showHeader?: boolean;
16    /** show shortcut, default: false */
17    showShortcut?: boolean;
18    /** header title, default: {locale.title} */
19    title?: string;
20    /** select type, default: range，one: one-day, range: range */
21    type?: 'one' | 'range';
22    /** visible, default: false */
23    visible?: boolean;
24
25    // DatePicker Component
26    /** default date for show, default: today */
27    defaultDate?: Date;
28    /** extra info of date */
29    getDateExtra?: (date: Date) => DateModels.ExtraData;
30    /** infinite scroll, default: true */
31    infinite?: boolean;
32    /** infinite scroll optimization, default: false */
33    infiniteOpt?: boolean;
34    /** inital generate months, default: 6 */
35    initalMonths?: number;
36    /** max date */
37    maxDate?: Date;
38    /** min date */
39    minDate?: Date;
40    /** select range has disable date */
41    onSelectHasDisableDate?: (date: Date[]) => void;
42
43    // TimePicker Component
44    /** inital time of TimePicker */
45    defaultTimeValue?: Date;
46}

DatePicker props

1export default interface PropsType {
2    /** default date for show, default: today */
3    defaultDate?: Date;
4    /** select value of start date */
5    startDate?: Date;
6    /** select value of end date */
7    endDate?: Date;
8    /** extra info of date */
9    getDateExtra?: (date: Date) => Models.ExtraData;
10    /** infinite scroll, default: true */
11    infinite?: boolean;
12    /** infinite scroll optimization, default: false */
13    infiniteOpt?: boolean;
14    /** inital generate months, default: 6 */
15    initalMonths?: number;
16    /** locale */
17    locale?: GlobalModels.Locale;
18    /** max date */
19    maxDate?: Date;
20    /** min date */
21    minDate?: Date;
22    /** callback when click the cell of date */
23    onCellClick?: (date: Date) => void;
24    /** select range has disable date */
25    onSelectHasDisableDate?: (date: Date[]) => void;
26    /** (web only) prefix class */
27    prefixCls?: string;
28    /** select type, default: range，one: one-day, range: range */
29    type?: 'one' | 'range';
30}

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-calendar is released under the MIT license.