rmc-calendar
v1.1.4
Published
React Mobile Calendar Component(web and react-native)
Downloads
72,903
Readme
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
import React, { Component } from 'react';
import { Calendar } from 'rmc-calendar';
import 'rmc-calendar/assets/index.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
setVisiable = () => {
this.setState({
visible: !this.state.visible,
});
}
render() {
return (
<div className="App">
<Calendar
visible={this.state.visible}
onCancel={this.setVisiable}
onConfirm={this.setVisiable}
/>
</div>
);
}
}
export default App;
API
Calendar props
interface PropsType {
/** enter direction,default: vertical */
enterDirection?: 'horizontal' | 'vertical';
/** locale */
locale?: GlobalModels.Locale;
onCancel?: () => void;
onConfirm?: (startDateTime?: Date, endDateTime?: Date) => void;
/** choose time,default: false */
pickTime?: boolean;
/** (web only) prefix class,default: rmc-calendar */
prefixCls?: string;
/** shortcut render, need showShortcut: true */
renderShortcut?: (select: (startDate?: Date, endDate?: Date) => void) => React.ReactNode;
/** show header, default: true */
showHeader?: boolean;
/** show shortcut, default: false */
showShortcut?: boolean;
/** header title, default: {locale.title} */
title?: string;
/** select type, default: range,one: one-day, range: range */
type?: 'one' | 'range';
/** visible, default: false */
visible?: boolean;
// DatePicker Component
/** default date for show, default: today */
defaultDate?: Date;
/** extra info of date */
getDateExtra?: (date: Date) => DateModels.ExtraData;
/** infinite scroll, default: true */
infinite?: boolean;
/** infinite scroll optimization, default: false */
infiniteOpt?: boolean;
/** inital generate months, default: 6 */
initalMonths?: number;
/** max date */
maxDate?: Date;
/** min date */
minDate?: Date;
/** select range has disable date */
onSelectHasDisableDate?: (date: Date[]) => void;
// TimePicker Component
/** inital time of TimePicker */
defaultTimeValue?: Date;
}
DatePicker props
export default interface PropsType {
/** default date for show, default: today */
defaultDate?: Date;
/** select value of start date */
startDate?: Date;
/** select value of end date */
endDate?: Date;
/** extra info of date */
getDateExtra?: (date: Date) => Models.ExtraData;
/** infinite scroll, default: true */
infinite?: boolean;
/** infinite scroll optimization, default: false */
infiniteOpt?: boolean;
/** inital generate months, default: 6 */
initalMonths?: number;
/** locale */
locale?: GlobalModels.Locale;
/** max date */
maxDate?: Date;
/** min date */
minDate?: Date;
/** callback when click the cell of date */
onCellClick?: (date: Date) => void;
/** select range has disable date */
onSelectHasDisableDate?: (date: Date[]) => void;
/** (web only) prefix class */
prefixCls?: string;
/** select type, default: range,one: one-day, range: range */
type?: 'one' | 'range';
}
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rmc-calendar is released under the MIT license.