Calendar

A calendar component, which can be used to display a single month at a time.

It also comes with built-in keyboard navigation, and is rendered into a table.

Should you need to display multiple months, I would suggest composing multiple instances of this component, or using the useCalendar hook to create your own.

Example usage

This example is the code that is used to render the “Simple calendar with keyboard navigation” on the examples page.

import {
  Calendar,
  useCalendar,
  type CalendarDateRenderer,
  type CalendarWeekdayRenderer,
} from 'react-temporal-ui';

const ExampleCalendar: React.FC = () => {
  const { weeks, weekDays, dayInMonth, nextMonth, prevMonth } = useCalendar();

  const MONTHS = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ];

  return (
    <>
      <div className='mx-2 flex items-center justify-between'>
        <button className='border px-1' onClick={prevMonth}>
          Prev
        </button>
        <p>
          {MONTHS[dayInMonth.getMonth()]} {dayInMonth.getFullYear()}
        </p>
        <button className='border px-1' onClick={nextMonth}>
          Next
        </button>
      </div>

      <Calendar
        weeks={weeks}
        weekDays={weekDays}
        weekDayRenderer={CalendarWeekday}
        weekDayRendererParentProps={{
          className: 'text-center',
        }}
        dateRenderer={CalendarDate}
        dateRendererParentProps={{
          className: 'group outline-none p-0 border',
        }}
      />
    </>
  );
};

const CalendarDate: CalendarDateRenderer = ({ day }) => {
  return (
    <div className='relative flex h-8 w-8 items-center justify-center group-focus-within:bg-red-500'>
      <p>{day.getDate()}</p>
    </div>
  );
};

const CalendarWeekday: CalendarWeekdayRenderer = ({ weekday }) => {
  return <>{weekday}</>;
};

export default ExampleCalendar;

Alternative component (AltCalendar)

In the current state, I’m unsure as to which approach is more feasible, so I’ve included two.

The main difference is that the AltCalendar component takes in children as slots, instead of a render function prop.

Example usage

import { AltCalendar, useCalendar } from 'react-temporal-ui';

const ExampleAltCalendar: React.FC = () => {
  const { weeks, weekDays } = useCalendar();

  return (
    <AltCalendar
      weeks={weeks}
      weekDays={weekDays}
      weekDayRendererParentProps={{
        className: 'text-center',
      }}
      dateRendererParentProps={{
        className: 'group outline-none p-0 border',
      }}
    >
      {({ weekday }) => (
        <div className='group-focus-within:bg-red-500'>{weekday}</div>
      )}
      {({ day }) => <div>{day.getDate()}</div>}
    </AltCalendar>
  );
};

export default ExampleAltCalendar;