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
  69b89a28_cd24_58c4_cf28_8541ea2d8504["Calendar17()"]
  c3187b23_676f_2d0a_eade_1bfa3f2985d5["calendar-17.tsx"]
  69b89a28_cd24_58c4_cf28_8541ea2d8504 -->|defined in| c3187b23_676f_2d0a_eade_1bfa3f2985d5
  style 69b89a28_cd24_58c4_cf28_8541ea2d8504 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/__registry__/default/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>
  )
}