# react-waterfall-calendar

> react-waterfall-calendar

Latest version **2.1.2** (published 2017-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-waterfall-calendar
pnpm add react-waterfall-calendar
yarn add react-waterfall-calendar
bun add react-waterfall-calendar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2017-08-08 |
| First published | 2017-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Runjuu |
| Maintainers | runjuuu |

## Links

- npm: https://www.npmjs.com/package/react-waterfall-calendar
- Repository: https://github.com/Runjuu/react-waterfall-calendar
- Homepage: https://github.com/Runjuu/react-waterfall-calendar#readme
- Issues: https://github.com/Runjuu/react-waterfall-calendar/issues
- npm.io page: https://npm.io/package/react-waterfall-calendar

## Dependencies (7)

- [jss](https://npm.io/package/jss.md) ^8.0.0
- [react](https://npm.io/package/react.md) ^15.6.1
- [moment](https://npm.io/package/moment.md) ^2.18.1
- [func-pool](https://npm.io/package/func-pool.md) ^1.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [jss-preset-default](https://npm.io/package/jss-preset-default.md) ^3.0.0

## Recent versions

- 2.1.2 (latest) — 2017-08-08
- 2.0.4 (beta) — 2017-05-02
- 2.1.1 — 2017-08-04
- 2.1.0 — 2017-08-04
- 2.0.9 — 2017-06-27
- 2.0.8 — 2017-05-06
- 2.0.7 — 2017-05-06
- 2.0.6 — 2017-05-02
- 2.0.5 — 2017-05-02
- 2.0.3 — 2017-05-02
- 2.0.2 — 2017-04-11
- 2.0.1 — 2017-04-11
- 2.0.0 — 2017-04-11
- 1.1.0 — 2017-04-11
- 1.0.0 — 2017-02-04

## README

# react-waterfall-calendar
[![Build Status](https://travis-ci.org/Runjuu/react-waterfall-calendar.svg?branch=master)](https://travis-ci.org/Runjuu/react-waterfall-calendar)
[![Coverage Status](https://coveralls.io/repos/github/Runjuu/react-waterfall-calendar/badge.svg?branch=master)](https://coveralls.io/github/Runjuu/react-waterfall-calendar?branch=master)
[![npm version](https://badge.fury.io/js/react-waterfall-calendar.svg)](https://badge.fury.io/js/react-waterfall-calendar)
[![Total downloads](https://img.shields.io/npm/dt/react-waterfall-calendar.svg)](https://www.npmjs.com/package/react-waterfall-calendar)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)

流式布局日历模块
## Props
```javascript
    <Calendar
      interval

      selectType
      classNames
      dataAttribute
      defaultSelected

      dateFormat
      monthFormat

      enableTouchTap
      onClick
    />
```

### interval
日历显示的月份区间

```javascript
    const { from, to, months } = interval;
```
##### { from, to }
> 格式为符合 [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) 的 `String` 类型

##### { months }
> 格式为大于0的 Number 类型，`{ from }` 为 `undefined` 时从当前月份开始计算

⚠️ 当`months !== undefined`时，`to`将不起任何作用

---
### selectType
日期如何被选中的类型
> 格式为 String 类型，接受以下三个值，默认为 `'SINGLE'`

```javascript
    const selectType = 'INTERVAL' || 'MULTIPLE' || 'SINGLE'
```

##### 'INTERVAL'
被选中的日期 是前后选择的两次日期间的所有日期
##### 'MULTIPLE'
所有被选中的日期都会同时存在
##### 'SINGLE'
只有最后一个被选择的日期

### classNames
传入自定义样式的样式名

```javascript
    const { calendar, month, horizontal, date } = classNames;
```

### dataAttribute
可对个别日期单独设置 data-* 属性

```javascript
    const dataAttribute = {};
    dataAttribute['2017-04-05'] = { attribute: 'attribute' }
```

### defaultSelected
在挂载日历组件时默认选中的日期

```javascript
    const defaultSelected = ['2017-02-06', '2017-02-07'];
```
---
### dateFormat

日期格式化

> 默认为 `'D'`

```javascript
    const dateFormat = 'D' || 'DD' || 'D日';
```

### monthFormat

月份格式化

> 默认为 `'YYYY-MM'`

```javascript
    const dateFormat = 'M' || 'MM' || 'M月';
```

---
### onClick
日期被点击时的回调方法

```javascript
    function onClick({ date, event, nextSelected, state }) {}
```

#### return
##### false *[boolean]*
> 被选中的日期不会更新为 `nextSelected` 中的内容

##### { nextSelected } *[Array]*
> 会根据 `onClick` 返回的 `nextSelected` 值更新
> `nextSelected` 为 **符合 [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) 的 `String` 类型** 的**数组**


### enableTouchTap
当 `enableTouchTap = true` 时，`onClick`回调事件为 `onTouchTap`
> 默认为 `false`

---
_Source: https://npm.io/package/react-waterfall-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._