CalendarSingle() — ui Function Reference

Architecture documentation for the CalendarSingle() function in calendar-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ CalendarSingle() — ui Function Reference

Dependency Diagram

graph TD
  f787da3b_0cf3_2010_b792_5e579a88bce6["CalendarSingle()"]
  5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab["calendar-demo.tsx"]
  f787da3b_0cf3_2010_b792_5e579a88bce6 -->|defined in| 5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab
  style f787da3b_0cf3_2010_b792_5e579a88bce6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/calendar-demo.tsx lines 30–46

function CalendarSingle() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
  )
  return (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">Single Selection</div>
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        className="rounded-lg border shadow-sm"
        captionLayout="dropdown"
      />
    </div>
  )
}