clauderic/react-infinite-calendar

React Infinite Calendar

Currently looking for maintainers to help maintain this project, please reach out if you would be interested

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:

npm install react-infinite-calendar --save

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

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:

<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

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(
  <InfiniteCalendar
    width={400}
    height={600}
    selected={today}
    disabledDays={[0,6]}
    minDate={lastWeek}
  />,
  document.getElementById('root')
);

For more usage examples, see http://clauderic.github.io/react-infinite-calendar/ or check out some code examples.

Prop Types

Display Options

Example usage of display options:

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

Dependencies

React Infinite Calendar has very few dependencies. It relies on react-tiny-virtual-list for virtualization and date-fns for handling date manipulation. It also uses recompose for extending the default functionality. It also has the following peerDependencies: react, and react-transition-group.

Reporting Issues

If you find an issue, please report it along with any relevant details to reproduce it. The easiest way to do so is to fork this sandbox on CodeSandbox.

Contributions

Yes please! Feature requests / pull requests are welcome. Learn how to contribute

Have a suggestion or just want to say hello? Come chat on Gitter!

License

react-infinite-calendar is available under the MIT License.