Awesome Open Source
Awesome Open Source

recal logo

📅 recal 📅

npm version license bundle size Lighthouse score: 100/100

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.

example calendar

See a Live Demo

Try on CodePen


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="" />
<script src=""></script>


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) => {

  render() {
    return (
        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) => {
  onEndDateSelected = (endDate) => {

  render() {
    return (
        startDate={ this.state.startDate }
        endDate={ this.state.endDate }
        onStartDateSelected={ this.onStartDateSelected }
        onEndDateSelected={ this.onEndDateSelected } />


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


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.).


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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,997
react (5,575
calendar (297
picker (159
preact (146
css-grid (55
calendar-component (24