Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clauderic/react-infinite-calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
https://github.com/clauderic/react-infinite-calendar
calendar component date datepicker infinite infinite-scroll range react
Last synced: 4 days ago
JSON representation
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
- Host: GitHub
- URL: https://github.com/clauderic/react-infinite-calendar
- Owner: clauderic
- License: mit
- Created: 2016-05-24T00:04:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-29T16:20:36.000Z (6 months ago)
- Last Synced: 2024-11-24T06:06:35.149Z (19 days ago)
- Topics: calendar, component, date, datepicker, infinite, infinite-scroll, range, react
- Language: JavaScript
- Homepage: http://clauderic.github.io/react-infinite-calendar/
- Size: 3.91 MB
- Stars: 3,990
- Watchers: 50
- Forks: 404
- Open Issues: 83
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-infinite-calendar - Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more. (Uncategorized / Uncategorized)
- awesome-list - React Infinite Calendar
- awesome-list - react-infinite-calendar - Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more. (Demos / Form Components)
- awesome-list - react-infinite-calendar - picker built with React, with localization, range selection, themes, keyboard support, and more. | clauderic | 3769 | (JavaScript)
- awesome-hackathon - react-infinite-calendar - picker built with React, with localization, range selection, themes, keyboard support, and more. (React)
README
# React Infinite Calendar
**Currently looking for maintainers to help maintain this project, please reach out if you would be interested**
[](https://www.npmjs.com/package/react-infinite-calendar)
[](https://www.npmjs.com/package/react-infinite-calendar)
[](https://github.com/clauderic/react-infinite-calendar/blob/master/LICENSE)
[](https://gitter.im/clauderic/react-infinite-calendar)
### Examples available here: http://clauderic.github.io/react-infinite-calendar/
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
Getting Started
---------------
Using [npm](https://www.npmjs.com/):
```
npm install react-infinite-calendar --save
```
ES6, CommonJS, and UMD builds are available with each distribution. For example:
```js
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // Make sure to import the default stylesheet
```
You can also use a global-friendly UMD build:
```html
var InfiniteCalendar = window.InfiniteCalendar.default;
...
```
Usage
------------
### Basic Example
```js
import React from 'react';
import { render } from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar';
import '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(
,
document.getElementById('root')
);
```
For more usage examples, see [http://clauderic.github.io/react-infinite-calendar/](http://clauderic.github.io/react-infinite-calendar/) or check out some [code examples](https://github.com/clauderic/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 | | Array of days of the week that should be disabled. For example, to disable Monday and Sunday: `[0, 6]` |
| disabledDates | Array | | 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 [default displayOptions](https://github.com/clauderic/react-infinite-calendar/blob/master/src/utils/defaultDisplayOptions.js) | See [display options](#display-options) section for more details. |
| locale | Object | See [default locale](https://github.com/clauderic/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 [default theme](https://github.com/clauderic/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
```
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-transition-group`](https://www.npmjs.com/package/react-transition-group).
Reporting Issues
----------------
If you find an [issue](https://github.com/clauderic/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 sandbox on CodeSandbox](https://codesandbox.io/s/zroj1zp7v4).
Contributions
------------
Yes please! Feature requests / pull requests are welcome. [Learn how to contribute](https://github.com/clauderic/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.