Calendar

import { Button } from "~/components/ui/button";
import { Calendar } from "~/components/ui/calendar";

<Calendar.Root>
  <Calendar.Header>
    <Calendar.Nav>
      <Button slot="previous"></Button>
      <Calendar.Month />
      <Button slot="next"></Button>
    </Calendar.Nav>
  </Calendar.Header>

  <Calendar.Grid>
    <Calendar.GridHeader>
      {(weekDay) => <Calendar.HeaderCell>{weekDay}</Calendar.HeaderCell>}
    </Calendar.GridHeader>
    <Calendar.GridBody>
      {(date) => <Calendar.Cell date={date} />}
    </Calendar.GridBody>
  </Calendar.Grid>
</Calendar.Root>

import { Button } from "~/components/ui/button";
import {
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeader,
  CalendarHeaderCell,
  CalendarMonth,
  CalendarNav,
  CalendarRoot,
} from "~/components/ui/calendar";

<CalendarRoot>
  <CalendarHeader>
    <CalendarNav>
      <Button slot="previous"></Button>
      <CalendarMonth />
      <Button slot="next"></Button>
    </CalendarNav>
  </CalendarHeader>

  <CalendarGrid>
    <CalendarGridHeader>
      {(weekDay) => <CalendarHeaderCell>{weekDay}</CalendarHeaderCell>}
    </CalendarGridHeader>
    <CalendarGridBody>
      {(date) => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
</CalendarRoot>