Function CalendarGrid

starters/hooks/src/Calendar.tsx:48–75

({state, ...props}: AriaCalendarGridProps & {state: CalendarState})

}

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

  return (
    <table {...gridProps} className="react-aria-CalendarGrid">
      <thead {...headerProps}>
        <tr>
          {weekDays.map((day, i) => (
            <th className="react-aria-CalendarHeaderCell" key={i}>
              {day}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
          <tr key={weekIndex}>
            {state
              .getDatesInWeek(weekIndex)
              .map((date, i) =>
                date ? <CalendarCell key={i} state={state} date={date} /> : <td key={i} />
              )}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function CalendarCell({state, date}: {state: CalendarState; date: CalendarDate}) {
  let ref = useRef<HTMLDivElement>(null);