calendar.md

Calendar

Calendar component provides a way to select a date while allowing you to style them however. All the date, month & year calculations are done internally using @internationalized/date to provide the ease of use. It follows the Grid Pattern for the keyboard navigaiton & focus management. Supports all the features as React Aria's useCalendar.

Table of Contents

• Usage
• Other Examples
• Composition
• Props
  • CalendarOptions
  • CalendarBaseStateProps
  • CalendarCellOptions
  • CalendarCellButtonOptions
  • CalendarCellStateProps
  • CalendarGridOptions
  • CalendarGridStateProps
  • CalendarNextButtonOptions
  • CalendarPreviousButtonOptions
  • CalendarStateProps
  • CalendarTitleOptions

Usage

import * as React from "react";
import { VisuallyHidden } from "ariakit";
import { createCalendar, getWeeksInMonth } from "@internationalized/date";
import { useLocale } from "@react-aria/i18n";

import {
  Calendar,
  CalendarCell,
  CalendarCellButton,
  CalendarGrid,
  CalendarNextButton,
  CalendarPreviousButton,
  CalendarTitle,
  useCalendarBaseState,
  useCalendarCellState,
  useCalendarGridState,
  useCalendarState,
} from "@adaptui/react";

import { ChevronLeft, ChevronRight } from "./Utils.component";

export const CalendarBasic = props => {
  let { locale } = useLocale();

  const state = useCalendarBaseState({ locale, createCalendar, ...props });
  const calendar = useCalendarState({ ...props, state });

  return (
    <Calendar state={calendar} className="calendar">
      <div className="header">
        <CalendarPreviousButton state={calendar} className="prev-month">
          <ChevronLeft />
        </CalendarPreviousButton>
        <CalendarTitle state={calendar} />
        <CalendarNextButton state={calendar} className="next-month">
          <ChevronRight />
        </CalendarNextButton>
      </div>
      <CalendarGridComp state={state} />
    </Calendar>
  );
};

export default CalendarBasic;

const CalendarGridComp = props => {
  const { state: baseState } = props;
  let { locale } = useLocale();
  let gridState = useCalendarGridState(props);

  let weeksInMonth = getWeeksInMonth(baseState.visibleRange.start, locale);

  return (
    <CalendarGrid state={gridState} className="dates">
      <thead>
        <tr>
          {gridState.weekDays.map((day, index) => {
            return (
              <th key={index}>
                {}
                <VisuallyHidden>{day}</VisuallyHidden>
                <span aria-hidden="true">{day}</span>
              </th>
            );
          })}
        </tr>
      </thead>
      <tbody>
        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
          <tr key={weekIndex}>
            {baseState
              .getDatesInWeek(weekIndex)
              .map((date, i) =>
                date ? (
                  <CalendarCellComp key={i} state={baseState} date={date} />
                ) : (
                  <td key={i} />
                ),
              )}
          </tr>
        ))}
      </tbody>
    </CalendarGrid>
  );
};

const CalendarCellComp = props => {
  const cellState = useCalendarCellState(props);
  const {
    isOutsideVisibleRange,
    isDisabled,
    isSelected,
    isUnavailable,
    formattedDate,
  } = cellState;

  return (
    <CalendarCell state={cellState}>
      <CalendarCellButton
        state={cellState}
        hidden={isOutsideVisibleRange}
        className={`cell ${isSelected ? "selected" : ""} ${
          isDisabled ? "disabled" : ""
        } ${isUnavailable ? "unavailable" : ""}`}
      >
        {formattedDate}
      </CalendarCellButton>
    </CalendarCell>
  );
};

Other Examples

Composition

• Calendar uses Role
• useCalendarBaseState uses useCalendarState
• CalendarCell uses Role
• CalendarCellButton uses Role
• useCalendarCellState uses its own state
• CalendarGrid uses Role
• useCalendarGridState uses its own state
• CalendarNextButton uses Role
• CalendarPreviousButton uses Role
• useCalendarState uses its own state
• CalendarTitle uses Role

Props

CalendarOptions

Name	Type	Description
state	CalendarAria	Object returned by the useCalendarState hook.

CalendarBaseStateProps

Name	Type	Description
locale	string	The locale to display and edit the value according to.
createCalendar	(name: string) => Calendar	A function that creates a Calendarobject for a given calendar identifier. Such a function may be imported from the@internationalized/date package, or manually implemented to include support foronly certain calendars.

CalendarStateProps props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
visibleDuration	DateDuration | undefined	The amount of days that will be displayed at once. This affects how pagination works.
selectionAlignment	"start" | "center" | "end" | undefined	Determines how to align the initial selection relative to the visible date range.
minValue	DateValue | undefined	The minimum allowed date that a user may select.
maxValue	DateValue | undefined	The maximum allowed date that a user may select.
isDateUnavailable	((date: DateValue) => boolean) | undefined	Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDisabled	boolean | undefined	Whether the calendar is disabled.
isReadOnly	boolean | undefined	Whether the calendar value is immutable.
autoFocus	boolean | undefined	Whether to automatically focus the calendar when it mounts.
focusedValue	DateValue | undefined	Controls the currently focused date within the calendar.
defaultFocusedValue	DateValue | undefined	The date that is focused when the calendar first mounts (uncountrolled).
onFocusChange	((date: CalendarDate) => void) | undefined	Handler that is called when the focused date changes.
validationState	ValidationState | undefined	Whether the current selection is valid or invalid according to application logic.
errorMessage	ReactNode	An error message to display when the selected value is invalid.
value	T | undefined	The current value (controlled).
defaultValue	T | undefined	The default value (uncontrolled).
onChange	((value: C) => void) | undefined	Handler that is called when the value changes.

CalendarCellOptions

Name	Type	Description
state	CalendarCellState	Object returned by the useCalendarCellState hook.

CalendarCellButtonOptions

Name	Type	Description
state	CalendarCellState	Object returned by the useCalendarCellState hook.

CalendarCellStateProps

Name	Type	Description
date	CalendarDate	The date that this cell represents.
state	CalendarState | RangeCalendarState	Object returned by the useCalendarBaseState & RangeCalendarBaseState hook.

CalendarGridOptions

Name	Type	Description
state	CalendarGridAria	Object returned by the useCalendarGridState hook.

CalendarGridStateProps

Name	Type	Description
startDate	CalendarDate | undefined	The first date displayed in the calendar grid.Defaults to the first visible date in the calendar.Override this to display multiple date grids in a calendar.
endDate	CalendarDate | undefined	The last date displayed in the calendar grid.Defaults to the last visible date in the calendar.Override this to display multiple date grids in a calendar.
state	CalendarState | RangeCalendarState	Object returned by the useCalendarBaseState & RangeCalendarBaseState hook.

CalendarNextButtonOptions

Name	Type	Description
state	CalendarAria | RangeCalendarState	Object returned by the useCalendarState & RangeCalendarState hook.

CalendarPreviousButtonOptions

Name	Type	Description
state	CalendarAria | RangeCalendarState	Object returned by the useCalendarState & RangeCalendarState hook.

CalendarStateProps

Name	Type	Description
state	CalendarState	Object returned by the useCalendarBaseState hook.

CalendarTitleOptions

Name	Type	Description
state	CalendarAria	Object returned by the useCalendarState hook.