Function Cell

packages/react-aria/stories/calendar/Example.tsx:116–141

(props)

}

function Cell(props) {
  let ref = useRef<HTMLSpanElement | null>(null);
  let {cellProps, buttonProps} = useCalendarCell(props, props.state, ref);

  let dateFormatter = useDateFormatter({
    day: 'numeric',
    timeZone: props.state.timeZone,
    calendar: props.date.calendar.identifier
  });

  return (
    <div {...cellProps} style={{display: 'inline-block'}}>
      <span
        ref={ref}
        {...buttonProps}
        style={{
          display: 'block',
          width: 42,
          height: 42,
          background: props.state.isSelected(props.date) ? 'blue' : ''
        }}>
        {dateFormatter.format(props.date.toDate(props.state.timeZone))}
      </span>
    </div>
  );
}

export function ExampleCustomFirstDay(props: AriaCalendarProps<DateValue>): JSX.Element {
  let {locale} = useLocale();