https://github.com/ruicsh/use-calendar
Headless calendar hook for React (no dependencies, WAI-ARIA compliant)
https://github.com/ruicsh/use-calendar
calendar headless react reacthooks wai-aria
Last synced: 29 days ago
JSON representation
Headless calendar hook for React (no dependencies, WAI-ARIA compliant)
- Host: GitHub
- URL: https://github.com/ruicsh/use-calendar
- Owner: ruicsh
- License: mit
- Created: 2022-07-10T20:56:14.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-03T20:59:12.000Z (over 1 year ago)
- Last Synced: 2026-05-30T03:08:29.794Z (about 2 months ago)
- Topics: calendar, headless, react, reacthooks, wai-aria
- Language: TypeScript
- Homepage:
- Size: 1.18 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
use-calendar
Headless calendar hook for React
## Why
* No dependencies, tiny footprint
* Configurable available dates, minimum and maximum dates
* Weekends, adjacent month's days
* Previous and next month/year navigation
* Events
* WAI-ARIA compliant
## Install
```bash
$ npm install @tuplo/use-calendar
# or with yarn
$ yarn add @tuplo/use-calendar
```
## Usage
Minimal example
```jsx
import { useCalendar } from '@tuplo/use-calendar'
function Calendar() {
const {
months,
getDayProps,
getPrevMonthProps,
getNextMonthProps
} = useCalendar()
return (
<>
{months.map(({ year, month, weeks }) => (
{month} {year}
Prev
Next
{
weeks.map((week) =>
week.map((day) =>
{day.date.getDate()}
))
}
))}
>
)
}
```
## Options
```typescript
const calendarProps = useCalendar({
availableDates: [new Date('2022-07-11'), new Date('2022-07-12')],
events: [{ start: new Date('2022-12-25'), title: 'Christmas' }],
firstDayOfWeek: 1,
minDate: new Date('2022-07-01'),
maxDate: new Date('2022-07-31'),
monthsToDisplay: 1,
onDateSelected: (day) => console.log(day.date),
selectedDate: new Date('2022-07-11'),
});
```
### availableDates
> `Date[]` | optional
Which days should be selectable on the calendar.
### events
> `{ start: Date, end?: Date, [k: string]: unknown }[]` | optional
List of events. The only required attribute on a `Event` is the `start` date. Any custom attributes you send in, will be returned back on the corresponding days, ex: `isAllDay: true`
### firstDayOfWeek
> `number` | defaults to `0`
First day of the week with possible values 0-6 (Sunday to Saturday). Defaults to
Sunday.
### minDate
> `Date` | optional
Used to calculate the minimum month to render.
### maxDate
> `Date` | optional
Used to calculate the maximum month to render.
### monthsToDisplay
> `number` | defaults to `1`
Number of months returned, based off the `selectedDate`. `Infinity` will display all months with available dates.
### onDateSelected
> `function(day: Day)` | optional
Called when the user selects a date.
### selectedDate
> `Date | string | number` | optional
Used to calculate what month to display on initial render.
## Outputs
The hook will return an object with the following shape:
```typescript
interface ICalendarProps {
getDayProps: IGetDayPropsFn;
getPrevMonthProps: IGetPrevNextPropsFn;
getNextMonthProps: IGetPrevNextPropsFn;
getPrevYearProps: IGetPrevNextPropsFn;
getNextYearProps: IGetPrevNextPropsFn;
months: IMonth[];
resetState: () => void;
}
```
Each month has the shape:
```typescript
interface IMonth {
weeks: IDay[][];
month: number;
year: number;
}
```
Each day returned on each week of the months to display is:
```typescript
interface IDay {
date: Date;
events?: IEvent[];
isSelectable?: boolean;
isSelected?: boolean;
isToday?: boolean;
isWeekend?: boolean;
isAdjacentMonth?: boolean;
}
```
An event is represented by (it can hold any extra data needed):
```typescript
interface IEvent {
\[key: string\]: unknown;
end?: Date;
start: Date;
}
```
## License
MIT