# react-calendar-mobile > A calendar component for mobile device Latest version **0.1.6** (published 2017-07-12) · MIT license · 0 weekly downloads ## Install ```sh npm install react-calendar-mobile pnpm add react-calendar-mobile yarn add react-calendar-mobile bun add react-calendar-mobile ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.6 | | Published | 2017-07-12 | | First published | 2017-02-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 21 | | Author | Jingxian Mao | | Maintainers | jessemao | | Keywords | react, react calendar, react calendar mobile, mobile calendar, calendar, touchable, scrollable, react-component, react components, react ui, mobile ui | ## Links - npm: https://www.npmjs.com/package/react-calendar-mobile - Repository: https://github.com/jessemao/react-calendar-mobile - Homepage: https://github.com/jessemao/react-calendar-mobile#readme - Issues: https://github.com/jessemao/react-calendar-mobile/issues - npm.io page: https://npm.io/package/react-calendar-mobile ## Dependencies (3) - [react](https://npm.io/package/react.md) ^15.6.1 - [react-dom](https://npm.io/package/react-dom.md) ^15.6.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 ## 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 - 0.1.6 (latest) — 2017-07-12 - 0.1.5 — 2017-05-31 - 0.1.4 — 2017-05-07 - 0.1.3 — 2017-03-03 - 0.1.2 — 2017-02-27 - 0.1.1 — 2017-02-26 - 0.1.0 — 2017-02-24 ## README # React Calendar Mobile React Calendar Mobile is a component very easy to use with no extra effort. It can be used in any project with great performance! Different from other calendar/date picker components, this component uses **touches** and **scrolls** to move to different months or weeks like native calendar on mobile device. It supports both **monthly** and **weekly** view. 点此阅读[简体中文](https://github.com/jessemao/react-calendar-mobile/blob/master/README.zh-cn.md)文档 # How to install ``` npm install react-calendar-mobile --save ``` # How to use ## ES6 ``` import Calendar from 'react-calendar-mobile'; ``` ## CommonJS ``` var Calendar = require('react-calendar-mobile'); ``` # Locale / International React Calendar Component supports **locale** format as [**Javascript Date API**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) provides. Users can pass value to *i18n*, *weekdayFormat*, *monthFormat*, *yearFormat* to localize the calendar. More details displays in the **Properties** table. # Properties | Name | Type | Default | Description | |---------------|-------------|------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | selectedDate | String/Date | new Date() | The date selected on calendar. Default to today's date. | | startDateAt | String/Date | new Date() | The date of calendar displaying starts at. e.g., startDateAt is `2017-02-01` if the calendar displays February 2017. | | startOnMonday | Boolean | false | If false, week starts from Sunday, otherwise, from Monday. | | decorate | object | {} | It indicates if there is any event on specific day. A key/value object that maps decorates to calendar. Key format is "YYYY-MM-DD", value can be any value, e.g. {"2017-02-15": true} will add an origin dot under the date of 2017-02-15 on calendar which indicates that there is/are events on that day. | | view | String | "month" | Value will be `"month"/"week"`. If set to "month", then a monthly calendar will be displayed, otherwise, it displays a week. | | className | String | "" | Customized class for the Calendar. | | i18n | String | "en-US" | Optional. A string with a [**BCP 47**](https://tools.ietf.org/rfc/bcp/bcp47.txt) language tag, or an array of such strings. | | weekdayFormat | String | "narrow" | The representation of the weekday. Possible values are `"narrow", "short", "long"`. | | monthFormat | String | "long" | The representation of the month. Possible values are `"numeric", "2-digit", "narrow", "short", "long"`. | | yearFormat | String | "numeric" | The representation of the year. Possible values are `"numeric", "2-digit"`. | | onSelectDate | Function | | Callback function when a date is selected. Output of the selected value is a `Date` object and is passed in as the **first** argument of this function. | | onChange | Function | | Callback function when calendar scrolls to a different month or week. Output is a `Date` object and value is the start date of the month or week displaying. Passed in as the **first** argument of this function. | # Style | Class Name | Description | |----------------------------------|------------------------------------------------------------------------------------------------| | .react-calendar | root div of calendar. | | .react-calendar__header | header div of calendar, where `year` and `month` display | | .react-calendar__year | year div of calendar. | | .react-calendar__month | month div of calendar. | | .react-calendar__main | main body div of calendar. | | .react-calendar__weekdays | weekdays title div of calendar. | | .react-calendar__weekday | each weekday title div of calendar. | | .react-calendar__days | days root div of calendar. | | .react-calendar__day | each day div of calendar. use `.react-calendar__day span` for date text style. | | .react-calendar__day--today | today's date div. | | .react-calendar__day--othermonth | dates of other months div. | | .react-calendar__day--selected | selected date div. | | .react-calendar__day--decorate | date with decorates on. To modify decorate's style, use `.react-calendar__day--decorate:after` | # Getting Started To play it yourself, you can clone this repo and run the example in your local space. Or you can play with the picker [**Online here**](https://jessemao.github.io/react-calendar-mobile/) ``` git clone https://github.com/jessemao/react-calendar-mobile.git cd react-calendar-mobile && cd example npm install npm start ``` # License MIT --- _Source: https://npm.io/package/react-calendar-mobile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._