Calendar10() — ui Function Reference

Architecture documentation for the Calendar10() function in calendar-10.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar10() — ui Function Reference

Dependency Diagram

graph TD
  847890b6_f0a5_ed9e_4b3c_75e4dcc5dc1c["Calendar10()"]
  47027812_478d_2fc1_3e3e_bb8c764c1904["calendar-10.tsx"]
  847890b6_f0a5_ed9e_4b3c_75e4dcc5dc1c -->|defined in| 47027812_478d_2fc1_3e3e_bb8c764c1904
  style 847890b6_f0a5_ed9e_4b3c_75e4dcc5dc1c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/blocks/calendar-10.tsx lines 15–50

export default function Calendar10() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(2025, 5, 12)
  )
  const [month, setMonth] = React.useState<Date | undefined>(new Date())

  return (
    <Card>
      <CardHeader className="relative">
        <CardTitle>Appointment</CardTitle>
        <CardDescription>Find a date</CardDescription>
        <Button
          size="sm"
          variant="outline"
          className="absolute right-4 top-4"
          onClick={() => {
            setMonth(new Date())
            setDate(new Date())
          }}
        >
          Today
        </Button>
      </CardHeader>
      <CardContent>
        <Calendar
          mode="single"
          month={month}
          onMonthChange={setMonth}
          selected={date}
          onSelect={setDate}
          className="bg-transparent p-0"
        />
      </CardContent>
    </Card>
  )
}