📅 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 recommenddate-fns
. For a more flexible, fully-featured set of calendar components, seereact-dates
.
Installation
Using recal is simple. Just install the npm package:
npm i -S recal
Or, import recal and its stylesheet via CDN:
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.; // Calendar components.; // Stylesheet for calendar.;
Date Picker
To create a single date picker, use the DatePicker
component as follows:
Component state = {}; { this; } { return <DatePicker date= thisstateselectedDate onDateSelected= thisonDateSelected /> ; }
Date Range Picker
To create a date range picker, use the DateRangePicker
component as follows:
Component state = {}; { this; } { this; } { return <DateRangePicker startDate= thisstatestartDate endDate= thisstateendDate onStartDateSelected= thisonStartDateSelected onEndDateSelected= thisonEndDateSelected /> ; }
Options
Both calendars have some required and some optional props.
// Used by DatePickerselectedDate: PropTypesonDateSelected: PropTypesfunc // Used by DateRangePickerstartDate: PropTypesendDate: PropTypesonStartDateSelected: PropTypesfunconEndDateSelected: PropTypesfunc // Used by either (optional)onDateHovered: PropTypesfunconDateFocused: PropTypesfuncisDateHighlighted: PropTypesfuncisDateEnabled: PropTypesfunclocale: PropTypesstringdisabled: PropTypesbool
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 |