Calendar12() — ui Function Reference

Architecture documentation for the Calendar12() function in calendar-12.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar12() — ui Function Reference

Dependency Diagram

graph TD
  bb9ac342_703c_05a7_121a_9b4edfa8483e["Calendar12()"]
  66ee35b3_10df_2e4b_2a36_c8be4e653327["calendar-12.tsx"]
  bb9ac342_703c_05a7_121a_9b4edfa8483e -->|defined in| 66ee35b3_10df_2e4b_2a36_c8be4e653327
  style bb9ac342_703c_05a7_121a_9b4edfa8483e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/new-york/blocks/calendar-12.tsx lines 34–78

export default function Calendar12() {
  const [locale, setLocale] =
    React.useState<keyof typeof localizedStrings>("es")
  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
    from: new Date(2025, 8, 9),
    to: new Date(2025, 8, 17),
  })

  return (
    <Card>
      <CardHeader className="relative border-b">
        <CardTitle>{localizedStrings[locale].title}</CardTitle>
        <CardDescription>
          {localizedStrings[locale].description}
        </CardDescription>
        <Select
          value={locale}
          onValueChange={(value) =>
            setLocale(value as keyof typeof localizedStrings)
          }
        >
          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
            <SelectValue placeholder="Language" />
          </SelectTrigger>
          <SelectContent align="end">
            <SelectItem value="es">Español</SelectItem>
            <SelectItem value="en">English</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent className="pt-4">
        <Calendar
          mode="range"
          selected={dateRange}
          onSelect={setDateRange}
          defaultMonth={dateRange?.from}
          numberOfMonths={2}
          locale={locale === "es" ? es : enUS}
          className="bg-transparent p-0"
          buttonVariant="outline"
        />
      </CardContent>
    </Card>
  )
}