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

importReact,{Component}from'react';import{Calendar}from'rmc-calendar';import'rmc-calendar/assets/index.css';classAppextendsComponent{constructor(props){super(props);this.state={visible: false,};}setVisiable=()=>{this.setState({visible: !this.state.visible,});}render(){return(<divclassName="App"><Calendarvisible={this.state.visible}onCancel={this.setVisiable}onConfirm={this.setVisiable}/></div>);}}exportdefaultApp;

API

Calendar props

interfacePropsType{/** 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

exportdefaultinterfacePropsType{/** 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.