'use client'; import {createCalendar, type CalendarDate, type DateValue} from '@internationalized/date'; import {ChevronLeft, ChevronRight} from 'lucide-react'; import {mergeProps} from 'react-aria/mergeProps'; import { useCalendar, useCalendarCell, useCalendarGrid, type AriaCalendarGridProps, type AriaCalendarProps } from 'react-aria/useCalendar'; import {useCalendarState, type CalendarState} from 'react-stately/useCalendarState'; import {useFocusRing} from 'react-aria/useFocusRing'; import {useHover} from 'react-aria/useHover'; import {useLocale} from 'react-aria/I18nProvider'; import {useRef} from 'react'; import {Button} from '@/registry/react-aria/ui/Button'; import './Button.css'; import './Calendar.css'; export function Calendar(props: AriaCalendarProps) { let {locale} = useLocale(); let state = useCalendarState({...props, locale, createCalendar}); /*- begin highlight -*/ let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state); /*- end highlight -*/ return (

{title}

); } function CalendarGrid({state, ...props}: AriaCalendarGridProps & {state: CalendarState}) { let {gridProps, headerProps, weekDays, weeksInMonth} = useCalendarGrid(props, state); return ( {weekDays.map((day, i) => ( ))} {[...new Array(weeksInMonth).keys()].map(weekIndex => ( {state .getDatesInWeek(weekIndex) .map((date, i) => date ? : ))}

{day}
)}

); } function CalendarCell({state, date}: {state: CalendarState; date: CalendarDate}) { let ref = useRef(null); let { cellProps, buttonProps, isSelected, isOutsideVisibleRange, isDisabled, isUnavailable, isPressed, formattedDate } = useCalendarCell({date}, state, ref); let {hoverProps, isHovered} = useHover({}); let {focusProps, isFocusVisible} = useFocusRing(); return ( ); }