Calendar Month View

Copyimport {
  CalendarBody,
  CalendarDate,
  CalendarDatePagination,
  CalendarDatePicker,
  CalendarHeader,
  CalendarItem,
  CalendarMonthPicker,
  CalendarProvider,
  CalendarYearPicker,
} from "@/components/ui/calendar-month-view"

Copy<CalendarProvider>
  <CalendarDate>
    <CalendarDatePicker>
      <CalendarMonthPicker />
      <CalendarYearPicker start={2025} end={2027} />
    </CalendarDatePicker>
    <CalendarDatePagination />
  </CalendarDate>
  <CalendarHeader />
  <CalendarBody features={features}>
    {({ feature }) => <CalendarItem feature={feature} key={feature.id} />}
  </CalendarBody>
</CalendarProvider>

Copyexport type CalendarBodyProps = {
  features: Feature[]
  children: (props: { feature: Feature }) => ReactNode
}
 
export type CalendarDatePickerProps = {
  className?: string
  children: ReactNode
}
 
export type CalendarMonthPickerProps = {
  className?: string
}
 
export type CalendarYearPickerProps = {
  className?: string
  start: number
  end: number
}
 
export type CalendarDatePaginationProps = {
  className?: string
}
 
export type CalendarDateProps = {
  children: ReactNode
}
 
export type CalendarHeaderProps = {
  className?: string
}
 
export type CalendarItemProps = {
  feature: Feature
  className?: string
}
 
export type CalendarProviderProps = {
  locale?: Intl.LocalesArgument
  startDay?: number
  children: ReactNode
  className?: string
}