# rmc-calendar > React Mobile Calendar Component(web and react-native) Latest version **1.1.4** (published 2018-06-27) · 0 weekly downloads ## Install ```sh npm install rmc-calendar pnpm add rmc-calendar yarn add rmc-calendar bun add rmc-calendar ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.4 | | Published | 2018-06-27 | | First published | 2017-08-23 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 165.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 39 | | Maintainers | silentcloud, warmhug, zhang740 | | Keywords | react, react-component, react-m-calendar, m-calendar | ## Links - npm: https://www.npmjs.com/package/rmc-calendar - Repository: https://github.com/react-component/m-calendar - Issues: https://github.com/react-component/m-calendar/issues - npm.io page: https://npm.io/package/rmc-calendar ## Dependencies (3) - [rc-animate](https://npm.io/package/rc-animate.md) ^2.4.4 - [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0 - [rmc-date-picker](https://npm.io/package/rmc-date-picker.md) ^6.0.8 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.4 (latest) — 2018-06-27 - 1.1.3 — 2018-01-18 - 1.1.2 — 2017-10-25 - 1.1.1 — 2017-10-23 - 1.1.0 — 2017-10-23 - 1.0.0 — 2017-10-10 - 0.1.14 — 2017-10-09 - 0.1.13 — 2017-10-09 - 0.1.12 — 2017-09-30 - 0.1.11 — 2017-09-29 - 0.1.10 — 2017-09-28 - 0.1.9 — 2017-09-28 - 0.1.8 — 2017-09-26 - 0.1.7 — 2017-09-19 - 0.1.6 — 2017-09-12 - … 9 more at https://npm.io/package/rmc-calendar/versions ## README # rmc-calendar --- React Mobile Calendar Component (web) [![NPM version][npm-image]][npm-url] ![react](https://img.shields.io/badge/react-%3E%3D_15.2.0-green.svg) [![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 ## 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 [![rmc-calendar](https://nodei.co/npm/rmc-calendar.png)](https://npmjs.org/package/rmc-calendar) # docs ## Usage ```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 (
); } } export default App; ``` ## API ### Calendar props ```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; } ``` ### DatePicker props ```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 ## License rmc-calendar is released under the MIT license. --- _Source: https://npm.io/package/rmc-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._