JavaScript
✨ Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.

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.
• Localization and translation – En français, s'il vous plaît!
• Customizeable – Customize and theme to your heart's content.
• Keyboard support – ⬆️⬇️⬆️⬇️⬅️➡️⬅️➡️↩️
• Events and callbacks – beforeSelect, onSelect, onScroll, yadda yadda yadda.
• Mobile-friendly

And mucho, mucho mas 🎉

Installation

Using npm:

$ npm install react-infinite-calendar --save

Then, using a module bundler that supports either CommonJS or ES2015 modules, such as webpack:

// Using an ES6 transpiler like Babel
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // Make sure to import the default stylesheet

// Not using an ES6 transpiler
var InfiniteCalendar = require('react-infinite-calendar');
require('react-infinite-calendar/styles.css');

Alternatively, an UMD build is also available:

<link rel="stylesheet" href="react-infinite-calendar/styles.css">
<script src="react-infinite-calendar/dist/umd/react-infinite-calendar.js"></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 minDate = Number(new Date()) - (24*60*60*1000) * 7; // One week before today

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

For more usage examples, see http://clauderic.github.io/react-infinite-calendar/

Prop Types

Dependencies

React Infinite Calendar has few dependencies. It relies on the great work done by react-virtualized/VirtualScroll for handling virtual scrolling logic and Moment.js for handling date manipulation. It also has the following peer dependencies: react, react-dom, react-addons-shallow-compare, and react-addons-css-transition-group.

Contributions

Yes please! Feature requests / pull requests are welcome.