React Mobile Calendar Component(web and react-native)
npm install rmc-calendarReact Mobile Calendar Component (web)
[![NPM version][npm-image]][npm-url]
!react
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rmc-calendar.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rmc-calendar
[travis-image]: https://img.shields.io/travis/react-component/m-calendar.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/m-calendar
[coveralls-image]: https://img.shields.io/coveralls/react-component/m-calendar.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/m-calendar?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-calendar.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/m-calendar
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rmc-calendar.svg?style=flat-square
[download-url]: https://npmjs.org/package/rmc-calendar
``
npm i
npm start
http://localhost:8000/examples/
online example: http://react-component.github.io/m-calendar/
`
./node_modules/rc-tools run react-native-init
npm run watch-tsc
react-native start
react-native run-ios
jsx
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 (
onCancel={this.setVisiable}
onConfirm={this.setVisiable}
/>
);
}
}export default App;
`API
$3
ts
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;
}
`$3
ts
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
rmc-calendar is released under the MIT license.