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

1$ npm install @crossed/use-calendar
2
3# or with yarn
4$ yarn add @crossed/use-calendar

Usage

Minimal example

1import { useCalendar } from '@crossed/use-calendar'
2
3function Calendar() {
4  const {
5    months,
6    getDayProps,
7    getPrevMonthProps,
8    getNextMonthProps
9  } = useCalendar()
10
11  return (
12    <>
13      {months.map(({ year, month, weeks }) => (
14        <div>
15          <header>
16            <h1>{month} {year}</h1>
17          </header>
18          <nav>
19            <button {...getPrevMonthProps()}>Prev</button>
20            <button {...getNextMonthProps()}>Next</button>
21          </nav>
22          {
23            weeks.map((week) =>
24              week.map((day) =>
25                <button {...getDayProps({ day })}>{day.date.getDate()}</button>
26              ))
27          }
28        </div>
29      ))}
30    </>
31  )
32}

Options

1const calendarProps = useCalendar({
2  availableDates: [new Date('2022-07-11'), new Date('2022-07-12')],
3  events: [{ start: new Date('2022-12-25'), title: 'Christmas' }],
4  firstDayOfWeek: 1,
5  minDate: new Date('2022-07-01'),
6  maxDate: new Date('2022-07-31'),
7  monthsToDisplay: 1,
8  onDateSelected: (day) => console.log(day.date),
9  selectedDate: new Date('2022-07-11'),
10});

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:

1interface ICalendarProps {
2  getDayProps: IGetDayPropsFn;
3  getPrevMonthProps: IGetPrevNextPropsFn;
4  getNextMonthProps: IGetPrevNextPropsFn;
5  getPrevYearProps: IGetPrevNextPropsFn;
6  getNextYearProps: IGetPrevNextPropsFn;
7  months: IMonth[];
8  resetState: () => void;
9}

Each month has the shape:

1interface IMonth {
2  weeks: IDay[][];
3  month: number;
4  year: number;
5}

Each day returned on each week of the months to display is:

1interface IDay {
2  date: Date;
3  events?: IEvent[];
4  isSelectable?: boolean;
5  isSelected?: boolean;
6  isToday?: boolean;
7  isWeekend?: boolean;
8  isAdjacentMonth?: boolean;
9}

An event is represented by (it can hold any extra data needed):

1interface IEvent {
2  \[key: string\]: unknown;
3  end?: Date;
4  start: Date;
5}

License

MIT