React Calendar Mobile 是一个简单易用的React插件。与其他诸多日历插件不太一样的是，该插件使用 touches 和 scrolls 操作来改变月/周。同时，该插件还支持单月显示或者单周显示方式。
Click for English language documentation.
npm install react-calendar-mobile --save
import Calendar from 'react-calendar-mobile';
var Calendar = require('react-calendar-mobile');
React Calendar Component 支持其他语言格式。（具体支持的格式参见Javascript Date API）在使用该插件是，只需要传入正确的值给 i18n, weekdayFormat, monthFormat, yearFormat 就能正常显示其他语言了。更多详细信息请参看参数表格。
| 名称 | 类型 | 默认值 | 详细说明 |
|---|---|---|---|
| selectedDate | String/Date | new Date() | 当前选择的日期。 |
| startDateAt | String/Date | new Date() | 当前显示日历中的第一天，根据日历的显示格式决定是月/周第一天。例如，如果日历当前显示2017年2月，那么startDateAt就是 2017-02-01。 |
| startOnMonday | Boolean | false | 如果是true，那么每周从周一开始，如果是false，那么周是从周日开始 |
| decorate | object | {} | 如果某天有活动，则会显示该decorate。这个值是一个key/value对象。 key的格式是YYYY-MM-DD, value则可为任意值。例如，如果decorate的值是{"2017-02-15": true}，那么在2017-02-15这一天会出现一个小圆圈来标识这一天有活动。 |
| view | String | "month" | 值只能是 "month"/"week"。 如果是"month"，那么日历就按月来展示，如果是"week"，那么日历就按照周来显示。 |
| className | String | "" | 用户可以自定义class给日历插件。 |
| i18n | String | "en-US" | 应该传入符合BCP 47 规范的标签。 |
| weekdayFormat | String | "narrow" | 日历上周的名称显示格式，可以传入的值有"narrow", "short", "long"。 |
| monthFormat | String | "long" | 日历上月的名称显示格式，可以传入的值有"numeric", "2-digit", "narrow", "short", "long". |
| yearFormat | String | "numeric" | 日历上年的名称显示格式，可以传入的值有"numeric", "2-digit". |
| onSelectDate | Function | 回调函数。改函数第一个参数就是当前选定的日期，格式是Date对象。 |
|
| onChange | Function | 回调函数。改函数第一个参数就是当前显示的月/周的第一个日期，格式是Date对象。 |
| Class | 详细说明 |
|---|---|
| .react-calendar | 日历的根div |
| .react-calendar__header | 日历标题div，年和月 |
| .react-calendar__year | 日历年 div. |
| .react-calendar__month | 日历月 div. |
| .react-calendar__main | 日历body div |
| .react-calendar__weekdays | 日历所有周名称div |
| .react-calendar__weekday | 日历单个周名称 div |
| .react-calendar__days | 日历所有日期div |
| .react-calendar__day | 单个日期div。使用.react-calendar__day span来改变日期显示. |
| .react-calendar__day--today | 标明今天 div |
| .react-calendar__day--othermonth | 标明其他月份日期 div |
| .react-calendar__day--selected | 标明选定日期 div |
| .react-calendar__day--decorate | 标明有小圆圈 div。如果要改变小圆圈形式，使用.react-calendar__day--decorate:after |
你可以复制该repo并在电脑上运行example。
或者可以[在线]试用(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
MIT