Calendar13() — ui Function Reference

Architecture documentation for the Calendar13() function in calendar-13.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar13() — ui Function Reference

Dependency Diagram

graph TD
  cb1a8224_4d59_0d91_a522_4faa94d8e105["Calendar13()"]
  daac7304_2035_d998_945c_c8207e72daee["calendar-13.tsx"]
  cb1a8224_4d59_0d91_a522_4faa94d8e105 -->|defined in| daac7304_2035_d998_945c_c8207e72daee
  style cb1a8224_4d59_0d91_a522_4faa94d8e105 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/blocks/calendar-13.tsx lines 15–58

export default function Calendar13() {
  const [dropdown, setDropdown] =
    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
      "dropdown"
    )
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(2025, 5, 12)
  )

  return (
    <div className="flex flex-col gap-4">
      <Calendar
        mode="single"
        defaultMonth={date}
        selected={date}
        onSelect={setDate}
        captionLayout={dropdown}
        className="rounded-lg border shadow-sm"
      />
      <div className="flex flex-col gap-3">
        <Label htmlFor="dropdown" className="px-1">
          Dropdown
        </Label>
        <Select
          value={dropdown}
          onValueChange={(value) =>
            setDropdown(
              value as React.ComponentProps<typeof Calendar>["captionLayout"]
            )
          }
        >
          <SelectTrigger id="dropdown" className="bg-background w-full">
            <SelectValue placeholder="Dropdown" />
          </SelectTrigger>
          <SelectContent align="center">
            <SelectItem value="dropdown">Month and Year</SelectItem>
            <SelectItem value="dropdown-months">Month Only</SelectItem>
            <SelectItem value="dropdown-years">Year Only</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}