📅 recal 📅

A minimal, accessible React/Preact calendar component using modern CSS, for modern browsers. Now with a 100 Lighthouse Accessibility Audit score. It works with native Javascript dates, so there's no need to import any heavy dependencies like moment. For a set of functions for working with Javascript Dates, we recommend date-fns. For a more flexible, fully-featured set of calendar components, see react-dates.

See a Live Demo

Try on CodePen

Installation

Using recal is simple. Just install the npm package:

npm i -S recal

Or, import recal and its stylesheet via CDN:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/recal/lib/index.css" /> <script src="https://unpkg.com/recal"></script>

Usage

If you're using recal from npm, be sure to import the necessary modules into the file you wish to use it in.

// You can use React or Preact here—just make sure you have the proper aliasing. import React from 'react';  // Calendar components. import { DatePicker, DateRangePicker } from 'recal';  // Stylesheet for calendar. import 'recal/lib/index.css';

Date Picker

To create a single date picker, use the DatePicker component as follows:

class MyDatePicker extends React.Component {   state = {};    onDateSelected = (selectedDate) => {     this.setState({       selectedDate     });   }    render() {     return (       <DatePicker         date={ this.state.selectedDate }         onDateSelected={ this.onDateSelected } />     );   } }

Date Range Picker

To create a date range picker, use the DateRangePicker component as follows:

class MyDateRangePicker extends React.Component {   state = {};    onStartDateSelected = (startDate) => {     this.setState({       startDate     });   }   onEndDateSelected = (endDate) => {     this.setState({       endDate     });   }    render() {     return (       <DateRangePicker         startDate={ this.state.startDate }         endDate={ this.state.endDate }         onStartDateSelected={ this.onStartDateSelected }         onEndDateSelected={ this.onEndDateSelected } />     );   } }

Options

Both calendars have some required and some optional props.

// Used by DatePicker selectedDate: PropTypes.instanceOf(Date), onDateSelected: PropTypes.func,  // Used by DateRangePicker startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date), onStartDateSelected: PropTypes.func, onEndDateSelected: PropTypes.func,  // Used by either (optional) onDateHovered: PropTypes.func, onDateFocused: PropTypes.func, isDateHighlighted: PropTypes.func, isDateEnabled: PropTypes.func, locale: PropTypes.string, disabled: PropTypes.bool

Localization

Use the locale string prop on the calendar components to localize the month and days of the week into other languages (e.g. "en-US", "es-MX", etc.).

Accessibility

This set of calendars are optimized for screen readers as well as for keyboard-based navigation. The following shortcuts are available when the calendar is focused:

Key	Direction	Time
Left Arrow	Back	1 day
Right Arrow	Forward	1 day
Up Arrow	Back	1 week
Down Arrow	Forward	1 week
Page Up	Back	1 month
Page Down	Forward	1 month
Shift + Page Up	Back	1 year
Shift + Page Down	Forward	1 year

Accessible React/Preact Calendar Component – recal