Function Calendar

starters/hooks/src/Calendar.tsx:21–46

(props: AriaCalendarProps<DateValue>)

import './Calendar.css';

export function Calendar(props: AriaCalendarProps<DateValue>) {
  let {locale} = useLocale();
  let state = useCalendarState({...props, locale, createCalendar});
  /*- begin highlight -*/
  let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state);
  /*- end highlight -*/

  return (
    <div {...calendarProps} className="react-aria-Calendar">
      <header>
        <Button {...prevButtonProps} variant="quiet">
          <ChevronLeft size={18} />
        </Button>
        <h2 className="react-aria-CalendarHeading">{title}</h2>
        <Button {...nextButtonProps} variant="quiet">
          <ChevronRight size={18} />
        </Button>
      </header>
      <div className="months">
        <div className="month">
          <CalendarGrid state={state} />
        </div>
      </div>
    </div>
  );
}

function CalendarGrid({state, ...props}: AriaCalendarGridProps & {state: CalendarState}) {
  let {gridProps, headerProps, weekDays, weeksInMonth} = useCalendarGrid(props, state);