1 | # rmc-calendar
|
2 | ---
|
3 |
|
4 | React Mobile Calendar Component (web)
|
5 |
|
6 |
|
7 | [![NPM version][npm-image]][npm-url]
|
8 | ![react](https://img.shields.io/badge/react-%3E%3D_15.2.0-green.svg)
|
9 | [![build status][travis-image]][travis-url]
|
10 | [![Test coverage][coveralls-image]][coveralls-url]
|
11 | [![gemnasium deps][gemnasium-image]][gemnasium-url]
|
12 | [![npm download][download-image]][download-url]
|
13 |
|
14 | [npm-image]: http://img.shields.io/npm/v/rmc-calendar.svg?style=flat-square
|
15 | [npm-url]: http://npmjs.org/package/rmc-calendar
|
16 | [travis-image]: https://img.shields.io/travis/react-component/m-calendar.svg?style=flat-square
|
17 | [travis-url]: https://travis-ci.org/react-component/m-calendar
|
18 | [coveralls-image]: https://img.shields.io/coveralls/react-component/m-calendar.svg?style=flat-square
|
19 | [coveralls-url]: https://coveralls.io/r/react-component/m-calendar?branch=master
|
20 | [gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-calendar.svg?style=flat-square
|
21 | [gemnasium-url]: https://gemnasium.com/react-component/m-calendar
|
22 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
23 | [node-url]: http://nodejs.org/download/
|
24 | [download-image]: https://img.shields.io/npm/dm/rmc-calendar.svg?style=flat-square
|
25 | [download-url]: https://npmjs.org/package/rmc-calendar
|
26 |
|
27 | ## Screenshots
|
28 |
|
29 | -->
|
30 |
|
31 |
|
32 | ## Development
|
33 |
|
34 | ```
|
35 | npm i
|
36 | npm start
|
37 | ```
|
38 |
|
39 | ## Example
|
40 |
|
41 | http://localhost:8000/examples/
|
42 |
|
43 | online example: http://react-component.github.io/m-calendar/
|
44 |
|
45 | ## react-native (TBC)
|
46 |
|
47 | ```
|
48 | ./node_modules/rc-tools run react-native-init
|
49 | npm run watch-tsc
|
50 | react-native start
|
51 | react-native run-ios
|
52 | ```
|
53 |
|
54 | ## install
|
55 |
|
56 | [![rmc-calendar](https://nodei.co/npm/rmc-calendar.png)](https://npmjs.org/package/rmc-calendar)
|
57 |
|
58 |
|
59 | # docs
|
60 |
|
61 | ## Usage
|
62 | ```jsx
|
63 | import React, { Component } from 'react';
|
64 |
|
65 | import { Calendar } from 'rmc-calendar';
|
66 | import 'rmc-calendar/assets/index.css';
|
67 |
|
68 | class App extends Component {
|
69 | constructor(props) {
|
70 | super(props);
|
71 | this.state = {
|
72 | visible: false,
|
73 | };
|
74 | }
|
75 |
|
76 | setVisiable = () => {
|
77 | this.setState({
|
78 | visible: !this.state.visible,
|
79 | });
|
80 | }
|
81 |
|
82 | render() {
|
83 | return (
|
84 | <div className="App">
|
85 | <Calendar
|
86 | visible={this.state.visible}
|
87 | onCancel={this.setVisiable}
|
88 | onConfirm={this.setVisiable}
|
89 | />
|
90 | </div>
|
91 | );
|
92 | }
|
93 | }
|
94 |
|
95 | export default App;
|
96 | ```
|
97 |
|
98 | ## API
|
99 |
|
100 | ### Calendar props
|
101 | ```ts
|
102 | interface PropsType {
|
103 | /** enter direction,default: vertical */
|
104 | enterDirection?: 'horizontal' | 'vertical';
|
105 | /** locale */
|
106 | locale?: GlobalModels.Locale;
|
107 | onCancel?: () => void;
|
108 | onConfirm?: (startDateTime?: Date, endDateTime?: Date) => void;
|
109 | /** choose time,default: false */
|
110 | pickTime?: boolean;
|
111 | /** (web only) prefix class,default: rmc-calendar */
|
112 | prefixCls?: string;
|
113 | /** shortcut render, need showShortcut: true */
|
114 | renderShortcut?: (select: (startDate?: Date, endDate?: Date) => void) => React.ReactNode;
|
115 | /** show header, default: true */
|
116 | showHeader?: boolean;
|
117 | /** show shortcut, default: false */
|
118 | showShortcut?: boolean;
|
119 | /** header title, default: {locale.title} */
|
120 | title?: string;
|
121 | /** select type, default: range,one: one-day, range: range */
|
122 | type?: 'one' | 'range';
|
123 | /** visible, default: false */
|
124 | visible?: boolean;
|
125 |
|
126 | // DatePicker Component
|
127 | /** default date for show, default: today */
|
128 | defaultDate?: Date;
|
129 | /** extra info of date */
|
130 | getDateExtra?: (date: Date) => DateModels.ExtraData;
|
131 | /** infinite scroll, default: true */
|
132 | infinite?: boolean;
|
133 | /** infinite scroll optimization, default: false */
|
134 | infiniteOpt?: boolean;
|
135 | /** inital generate months, default: 6 */
|
136 | initalMonths?: number;
|
137 | /** max date */
|
138 | maxDate?: Date;
|
139 | /** min date */
|
140 | minDate?: Date;
|
141 | /** select range has disable date */
|
142 | onSelectHasDisableDate?: (date: Date[]) => void;
|
143 |
|
144 | // TimePicker Component
|
145 | /** inital time of TimePicker */
|
146 | defaultTimeValue?: Date;
|
147 | }
|
148 | ```
|
149 |
|
150 | ### DatePicker props
|
151 | ```ts
|
152 | export default interface PropsType {
|
153 | /** default date for show, default: today */
|
154 | defaultDate?: Date;
|
155 | /** select value of start date */
|
156 | startDate?: Date;
|
157 | /** select value of end date */
|
158 | endDate?: Date;
|
159 | /** extra info of date */
|
160 | getDateExtra?: (date: Date) => Models.ExtraData;
|
161 | /** infinite scroll, default: true */
|
162 | infinite?: boolean;
|
163 | /** infinite scroll optimization, default: false */
|
164 | infiniteOpt?: boolean;
|
165 | /** inital generate months, default: 6 */
|
166 | initalMonths?: number;
|
167 | /** locale */
|
168 | locale?: GlobalModels.Locale;
|
169 | /** max date */
|
170 | maxDate?: Date;
|
171 | /** min date */
|
172 | minDate?: Date;
|
173 | /** callback when click the cell of date */
|
174 | onCellClick?: (date: Date) => void;
|
175 | /** select range has disable date */
|
176 | onSelectHasDisableDate?: (date: Date[]) => void;
|
177 | /** (web only) prefix class */
|
178 | prefixCls?: string;
|
179 | /** select type, default: range,one: one-day, range: range */
|
180 | type?: 'one' | 'range';
|
181 | }
|
182 | ```
|
183 |
|
184 | ## Test Case
|
185 |
|
186 | ```
|
187 | npm test
|
188 | npm run chrome-test
|
189 | ```
|
190 |
|
191 | ## Coverage
|
192 |
|
193 | ```
|
194 | npm run coverage
|
195 | ```
|
196 |
|
197 | open coverage/ dir
|
198 |
|
199 | ## License
|
200 |
|
201 | rmc-calendar is released under the MIT license.
|