Function Example

packages/react-aria/stories/calendar/Example.tsx:25–79

(
  props: AriaCalendarProps<T> & {visibleDuration: DateDuration}
)

import {useLocale} from '../../src/i18n/I18nProvider';

export function Example<T extends DateValue | CalendarDate>(
  props: AriaCalendarProps<T> & {visibleDuration: DateDuration}
): JSX.Element {
  let {locale} = useLocale();
  const {visibleDuration} = props;

  let state = useCalendarState({
    createCalendar,
    ...props,
    locale
  });

  let {calendarProps, prevButtonProps, nextButtonProps} = useCalendar(props, state);

  let grids = useMemo(() => {
    let gridCount = 1;
    if (visibleDuration.months && visibleDuration.months > 0) {
      gridCount = visibleDuration.months;
    }

    let components: Array<ReactElement> = [];
    for (let i = 0; i < gridCount; i++) {
      components.push(
        <CalendarGrid
          key={i}
          state={state}
          visibleDuration={visibleDuration}
          offset={{months: i}}
        />
      );
    }

    return components;
  }, [visibleDuration, state]);

  return (
    <div {...calendarProps}>
      <div style={{textAlign: 'center'}} data-testid={'range'}>
        {calendarProps['aria-label']}
      </div>
      <div
        style={{display: 'grid', gridTemplateColumns: `repeat(${grids.length}, 1fr)`, gap: '1em'}}>
        {grids}
      </div>
      <div>
        <Button variant={'secondary'} {...prevButtonProps}>
          prev
        </Button>
        <Button variant={'secondary'} {...nextButtonProps}>
          next
        </Button>
      </div>
    </div>
  );
}

function CalendarGrid({
  state,