Calendar

<Calendar.Root />

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <Calendar.Root key={index} size={size} defaultValue={new Date()} />
    )}
  </For>
</Wrap>

<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Calendar.Root
        key={index}
        colorScheme={colorScheme}
        defaultValue={new Date(new Date().setDate(1))}
      />
    )}
  </For>
</Wrap>

<Wrap gap="md">
  <For each={["rounded", "circle", "square"]}>
    {(shape, index) => (
      <Calendar.Root
        key={index}
        shape={shape}
        range
        defaultValue={{
          start: new Date(),
          end: new Date(new Date().setDate(new Date().getDate() + 4)),
        }}
      />
    )}
  </For>
</Wrap>

const format = useMemo<Calendar.Format>(
  () => ({
    month: "long",
    weekday: "narrow",
    year: "2-digit",
  }),
  [],
)

return <Calendar.Root format={format} />

<Calendar.Root defaultValue={new Date()} />

<Calendar.Root defaultMonth={new Date("2025-10-01")} />

<Calendar.Root minDate={new Date(new Date().setDate(1))} />

<Calendar.Root maxDate={new Date(new Date().setDate(18))} />

<Calendar.Root disabled />

<Calendar.Root today={false} />

<Calendar.Root excludeDate={(date) => [0, 1, 6].includes(date.getDay())} />

<Calendar.Root multiple />

<Calendar.Root multiple max={3} />

<Calendar.Root range />

<Wrap gap="md">
  <Calendar.Root startDayOfWeek="sunday" />
  <Calendar.Root startDayOfWeek="monday" />
</Wrap>

<Calendar.Root weekendDays={[0, 1]} />

const holidays = useMemo(
  () => [
    new Date("2025-01-01"),
    new Date("2025-01-13"),
    new Date("2025-02-11"),
    new Date("2025-02-23"),
    new Date("2025-02-24"),
    new Date("2025-03-20"),
    new Date("2025-04-29"),
    new Date("2025-05-03"),
    new Date("2025-05-04"),
    new Date("2025-05-05"),
    new Date("2025-05-06"),
    new Date("2025-07-21"),
    new Date("2025-08-11"),
    new Date("2025-09-15"),
    new Date("2025-09-23"),
    new Date("2025-10-13"),
    new Date("2025-11-03"),
    new Date("2025-11-23"),
    new Date("2025-11-24"),
  ],
  [],
)

return <Calendar.Root holidays={holidays} />

<Calendar.Root
  dayProps={{
    css: { "&[data-outside]": { opacity: 0, pointerEvents: "none" } },
  }}
/>

<Wrap gap="md">
  <Calendar.Root>
    <Calendar.Navigation>
      <Calendar.Control justifyContent="flex-start" px="3">
        {({ month }) =>
          `${month.getFullYear()}/${(month.getMonth() + 1).toString().padStart(2, "0")}`
        }
      </Calendar.Control>
      <Calendar.PrevButton gridColumn="6 / 7" />
      <Calendar.NextButton gridColumn="7 / 8" />
    </Calendar.Navigation>

    <Calendar.Month />
  </Calendar.Root>

  <Calendar.Root
    day={({ value }) => (
      <Indicator
        colorScheme="blue"
        size="sm"
        disabled={value.getDate() % 4 !== 0}
        offset="-3px"
        labelProps={{ minBoxSize: "2" }}
      >
        <Text as="span">{value.getDate()}</Text>
      </Indicator>
    )}
  />
</Wrap>

const [value, setValue] = useState<Date | undefined>(new Date())

return <Calendar.Root value={value} onChange={setValue} />