@tuplo/calhook NPM

Why

Other similar solutions were a bit too heavy on dependencies or didn't support all features we needed.

No dependencies
WAI-ARIA compliant
Events

Install

$ npm install @tuplo/calhook

# or with yarn
$ yarn add @tuplo/calhook

Usage

Minimal example

import { useCalendar } from '@tuplo/calhook'

function Calendar() {
  const {
    months,
    getDayProps,
    getBackProps,
    getForwardProps
  } = useCalendar()

  return (
    <>
      {months.map(({ year, month, weeks }) => (
        <div>
          <header>
            <h1>{month} {year}</h1>
          </header>
          <nav>
            <button {...getBackProps()}>Prev</button>
            <button {...getForwardProps()}>Next</button>
          </nav>
          {
            weeks.map((week) =>
              week.map((day) =>
                day
                  ? <button {...getDayProps({ day })}>{day.date.getDate()}</button>
                  : <span />
              )
          }
        </div>
      ))
    </>
  )
}

Options

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'),
  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