useCalendar

A hook that returns a calendar object, with navigation functions and a list of the weeks within a month.

Parameters

NameTypeDefaultDescription
initialDateDatenew Date()The date to use as the base for the calendar, the month is chosen based off this date.
useDayjsboolfalseWhether to return day.js objects or not

Usage

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

const Calendar = () => {
  const { weeks, nextMonth, prevMonth } = useCalendar();

  return (
    <>
      <button onClick={prevMonth}>Prev</button>
      <button onClick={nextMonth}>Next</button>

      {weeks.map((week, i) => (
        <div key={i}>
          {week.map((day, j) => (
            <p>{day.getDate()}</p>
          ))}
        </div>
      ))}
    </>
  );
};