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
  7d5f03f2_0a35_45ce_2084_0c1adfa4faa9["Calendar13()"]
  60c91870_2842_f616_bf8f_00267ab07520["calendar-13.tsx"]
  7d5f03f2_0a35_45ce_2084_0c1adfa4faa9 -->|defined in| 60c91870_2842_f616_bf8f_00267ab07520
  style 7d5f03f2_0a35_45ce_2084_0c1adfa4faa9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/new-york/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>
  )
}