Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rubencodes/recal
A minimal, accessible React/Preact calendar component using modern CSS.
https://github.com/rubencodes/recal
calendar calendar-component css-grid javascript-dates picker preact range-picker react
Last synced: 25 days ago
JSON representation
A minimal, accessible React/Preact calendar component using modern CSS.
- Host: GitHub
- URL: https://github.com/rubencodes/recal
- Owner: rubencodes
- License: mit
- Created: 2018-04-05T20:55:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-06-01T20:58:35.000Z (about 6 years ago)
- Last Synced: 2024-05-16T02:24:34.598Z (about 2 months ago)
- Topics: calendar, calendar-component, css-grid, javascript-dates, picker, preact, range-picker, react
- Language: JavaScript
- Homepage: https://rubencodes.github.io/recal
- Size: 347 KB
- Stars: 191
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - rubencodes/recal - A minimal, accessible React/Preact calendar component using modern CSS. (JavaScript)
- awesome-stars - recal
- awesome-stars - recal - A minimal, accessible React/Preact calendar component using modern CSS. (JavaScript)
README
# 📅 recal 📅
[](https://github.com/ebidel/lighthouse-badge)
>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`](https://date-fns.org). For a more flexible, fully-featured set of calendar components, see [`react-dates`](https://github.com/airbnb/react-dates).
[**See a Live Demo**](https://rubencodes.github.io/recal)
[**Try on CodePen**](https://codepen.io/rubencodes/pen/PRQzPo/)
## Installation
Using recal is simple. Just install the npm package:
```bash
npm i -S recal
```
Or, import recal and its stylesheet via CDN:
```html
```
## Usage
If you're using recal from npm, be sure to import the necessary modules into the file you wish to use it in.
```javascript
// 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:
```javascript
class MyDatePicker extends React.Component {
state = {};
onDateSelected = (selectedDate) => {
this.setState({
selectedDate
});
}
render() {
return (
);
}
}
```
### Date Range Picker
To create a date range picker, use the `DateRangePicker` component as follows:
```javascript
class MyDateRangePicker extends React.Component {
state = {};
onStartDateSelected = (startDate) => {
this.setState({
startDate
});
}
onEndDateSelected = (endDate) => {
this.setState({
endDate
});
}
render() {
return (
);
}
}
```
### Options
Both calendars have some required and some optional props.
```javascript
// 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 |