Calendar17() — ui Function Reference

Architecture documentation for the Calendar17() function in calendar-17.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar17() — ui Function Reference

Dependency Diagram

graph TD
  d5ba6fc3_55ca_425b_2240_e35245e5c061["Calendar17()"]
  d7490876_943a_68ea_75aa_9343f1d98d88["calendar-17.tsx"]
  d5ba6fc3_55ca_425b_2240_e35245e5c061 -->|defined in| d7490876_943a_68ea_75aa_9343f1d98d88
  style d5ba6fc3_55ca_425b_2240_e35245e5c061 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/new-york/blocks/calendar-17.tsx lines 10–54

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

  return (
    <Card className="w-fit py-4">
      <CardContent className="px-4">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          className="bg-transparent p-0 [--cell-size:2.8rem]"
        />
      </CardContent>
      <CardFooter className="*:[div]:w-full flex gap-2 border-t px-4 pb-0 pt-4">
        <div className="flex-1">
          <Label htmlFor="time-from" className="sr-only">
            Start Time
          </Label>
          <Input
            id="time-from"
            type="time"
            step="1"
            defaultValue="10:30:00"
            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
          />
        </div>
        <span>-</span>
        <div className="flex-1">
          <Label htmlFor="time-to" className="sr-only">
            End Time
          </Label>
          <Input
            id="time-to"
            type="time"
            step="1"
            defaultValue="12:30:00"
            className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
          />
        </div>
      </CardFooter>
    </Card>
  )
}