npm package: @mo4islona/react-infinite-calendar
Description: Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.
Latest version: 2.4.7

<div align="center">
<img src="https://raw.githubusercontent.com/mo4islona/react-infinite-calendar/master/.github/logo.png" width="180"/>
</div>

# React Infinite Calendar

[![npm version](https://img.shields.io/npm/v/@mo4islona/react-infinite-calendar.svg)](https://www.npmjs.com/package/@mo4islona/react-infinite-calendar)
[![downloads](https://img.shields.io/npm/dm/@mo4islona/react-infinite-calendar.svg)](https://www.npmjs.com/package/@mo4islona/react-infinite-calendar)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/mo4islona/react-infinite-calendar/blob/master/LICENSE)
[![Gitter](https://badges.gitter.im/clauderic/react-infinite-calendar.svg)](https://gitter.im/clauderic/react-infinite-calendar)

### Examples available here: <a href="#">http://mo4islona.github.io/react-infinite-calendar/</a>

## Features

*   **Infinite scroll** – Just keep scrollin', just keep scrollin'
*   **Flexible** – Min/max date, disabled dates, disabled days, etc.
*   **Extensible** – Add date range-selection, multiple date selection, or create your own HOC!
*   **Localization and translation** – En français, s'il vous plaît!
*   **Customizeable** – Customize and theme to your heart's content.
*   **Year selection** – For rapidly jumping from year to year
*   **Keyboard support** – ⬆️ ⬇️ ⬆️ ⬇️ ⬅️ ➡️ ⬅️ ➡️ ↩️
*   **Events and callbacks** – beforeSelect, onSelect, onScroll, etc.
*   **Mobile-friendly** – Silky smooth scrolling on mobile

<div style="padding:30px">
<img src="https://raw.githubusercontent.com/mo4islona/react-infinite-calendar/master/.github/preview.gif" width="300" />
</div>

## Getting Started

Using [npm](https://www.npmjs.com/):

```
npm install @mo4islona/react-infinite-calendar react-addons-css-transition-group --save
yarn add @mo4islona/react-infinite-calendar react-addons-css-transition-group
```

ES6, CommonJS, and UMD builds are available with each distribution. For example:

```js
import InfiniteCalendar from '@mo4islona/react-infinite-calendar';
import '@mo4islona/react-infinite-calendar/styles.css'; // Make sure to import the default stylesheet
```

You can also use a global-friendly UMD build:

```html
<link rel="stylesheet" href="react-infinite-calendar/styles.css">
<script src="react-infinite-calendar/umd/react-infinite-calendar.js"></script>
<script>
var InfiniteCalendar = window.InfiniteCalendar.default;
...
</script>
```

## Usage

### Basic Example

```js
import React from 'react';
import { render } from 'react-dom';
import InfiniteCalendar from '@mo4islona/react-infinite-calendar';
import '@mo4islona/react-infinite-calendar/styles.css'; // only needs to be imported once

// Render the Calendar
var today = new Date();
var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);

render(
    <InfiniteCalendar
        width={400}
        height={600}
        selected={today}
        disabledDays={[0, 6]}
        minDate={lastWeek}
    />,
    document.getElementById('root')
);
```

For more usage examples, see [http://mo4islona.github.io/react-infinite-calendar/](http://mo4islona.github.io/react-infinite-calendar/) or check out some [code examples](https://github.com/mo4islona/react-infinite-calendar/tree/master/examples).

### Prop Types

| Property       | Type            | Default                                                                                                                                    | Description                                                                                                                                                                                                                      |
| :------------- | :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| selected       | Date or Boolean | `new Date()`                                                                                                                               | Value of the date that appears to be selected. Set to `false` if you don't wish to have a date initially selected.                                                                                                               |
| width          | Number          | `400`                                                                                                                                      | Width of the calendar, in pixels                                                                                                                                                                                                 |
| height         | Number          | `600`                                                                                                                                      | Height of the calendar, in pixels                                                                                                                                                                                                |
| min            | Date            | `new Date(1980, 0, 1)`                                                                                                                     | The minimum month that can be scrolled to.                                                                                                                                                                                       |
| max            | Date            | `new Date(2050, 11, 31)`                                                                                                                   | The maximum month that can be scrolled to.                                                                                                                                                                                       |
| minDate        | Date                     | `new Date(1980, 0, 1)`                                                                                                                     | The minimum date that is selectable.                                                                                                                                                                                             |
| maxDate        | Date                     | `new Date(2050, 11, 31)`                                                                                                                   | The maximum date that is selectable.                                                                                                                                                                                             |
| disabledDays   | Array<Number>            |                                                                                                                                            | Array of days of the week that should be disabled. For example, to disable Monday and Sunday: `[0, 6]`                                                                                                                           |
| disabledDates  | Array<Date> or Function  |                                                                                                                                            | Array of dates that should be disabled. For example: `[new Date(2017, 1, 8), new Date(), new Date(2017, 5, 17)]`                                                                                                                 |
| display        | String          | `'days'`                                                                                                                                   | Whether to display the `years` or `days` view.                                                                                                                                                                                   |
| displayOptions | Object          | See&nbsp;[default&nbsp;displayOptions](https://github.com/mo4islona/react-infinite-calendar/blob/master/src/utils/defaultDisplayOptions.js) | See [display options](#display-options) section for more details.                                                                                                                                                                |
| locale         | Object          | See&nbsp;[default&nbsp;locale](https://github.com/mo4islona/react-infinite-calendar/blob/master/src/utils/defaultLocale.js)                 | By default, React Infinite Calendar comes with the `English` locale. You can use this to change the language, or change the first day of the week. See [date-fns documentation](https://date-fns.org/docs/I18n) for more details |
| theme          | Object          | See&nbsp;[default&nbsp;theme](https://github.com/mo4islona/react-infinite-calendar/blob/master/src/utils/defaultTheme.js)                   | Basic customization of the colors                                                                                                                                                                                                |
| className      | String          |                                                                                                                                            | Optional CSS class name to append to the root `InfiniteCalendar` element.                                                                                                                                                        |
| onSelect       | Function        |                                                                                                                                            | Callback invoked after beforeSelect() returns true, but before the state of the calendar updates                                                                                                                                 |
| onScroll       | Function        |                                                                                                                                            | Callback invoked when the scroll offset changes. `function (scrollTop: number) {}`                                                                                                                                               |
| onScrollEnd    | Function        |                                                                                                                                            | Callback invoked `150ms` after the last onScroll event is triggered. `function (scrollTop: number) {}`                                                                                                                           |
| rowHeight      | Number          | `56`                                                                                                                                       | Height of each row in the calendar (each week is considered a `row`)                                                                                                                                                             |
| autoFocus      | Boolean         | `true`                                                                                                                                     | Whether the Calendar root should be auto-focused when it mounts. This is useful when `keyboardSupport` is enabled (the calendar must be focused to listen for keyboard events)                                                   |
| tabIndex       | Number          | `1`                                                                                                                                        | Tab-index of the calendar                                                                                                                                                                                                        |

### Display Options

| Property             | Type    | Default      | Description                                                                                                                                      |
| :------------------- | :------ | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| layout               | String  | `'portrait'` | Layout of the calendar. Should be one of `'portrait'` or `'landscape'`                                                                           |
| showHeader           | Boolean | `true`       | Show/hide the header                                                                                                                             |
| shouldHeaderAnimate  | Boolean | `true`       | Enable/Disable the header animation                                                                                                              |
| showOverlay          | Boolean | `true`       | Show/hide the month overlay when scrolling                                                                                                       |
| showTodayHelper      | Boolean | `true`       | Show/hide the floating back to `Today` helper                                                                                                    |
| showWeekdays         | Boolean | `true`       | Show/hide the weekdays in the header                                                                                                             |
| hideYearsOnSelect    | Boolean | `true`       | Whether to automatically hide the `years` view on select.                                                                                        |
| overscanMonthCount   | Number  | `4`          | Number of months to render above/below the visible months. Tweaking this can help reduce flickering during scrolling on certain browers/devices. |
| todayHelperRowOffset | Number  | `4`          | This controls the number of rows to scroll past before the _Today_ helper appears                                                                |

Example usage of display options:

```jsx
<InfiniteCalendar
    displayOptions={{
        layout: 'landscape',
        showOverlay: false,
        shouldHeaderAnimate: false,
    }}
/>
```

## Dependencies

React Infinite Calendar has very few dependencies. It relies on [`react-tiny-virtual-list`](https://github.com/clauderic/react-tiny-virtual-list) for virtualization and [`date-fns`](https://github.com/date-fns/date-fns) for handling date manipulation. It also uses [recompose](https://github.com/acdlite/recompose) for extending the default functionality. It also has the following peerDependencies: [`react`](https://www.npmjs.com/package/react), and [`react-addons-css-transition-group`](https://www.npmjs.com/package/react-addons-css-transition-group).

## Reporting Issues

If you find an [issue](https://github.com/mo4islona/react-infinite-calendar/issues), please report it along with any relevant details to reproduce it. The easiest way to do so is to fork this [jsfiddle](https://jsfiddle.net/clauderic/4rhn03do/).

## Contributions

Yes please! Feature requests / pull requests are welcome. [Learn how to contribute](https://github.com/mo4islona/react-infinite-calendar/blob/master/CONTRIBUTING.md)

Have a suggestion or just want to say hello? Come chat on [Gitter](https://gitter.im/clauderic/react-infinite-calendar)!

## License

_react-infinite-calendar_ is available under the MIT License.

This project is a fork of [react-infinite-calendar](https://github.com/clauderic/react-infinite-calendar) also licensed as MIT.