ui Architecture Docs
Home / File/ calendar-range.tsx — ui Source File

calendar-range.tsx — ui Source File

Architecture documentation for calendar-range.tsx, a tsx file in the ui codebase. 5 imports, 0 dependents.

File tsx DocumentationAtlas ContentSourcing 5 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  77c2dc4a_470b_5777_bb13_194de3bba1ac["calendar-range.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  77c2dc4a_470b_5777_bb13_194de3bba1ac --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  a8023de3_411c_8d95_59e9_37549a0c2d75["calendar"]
  77c2dc4a_470b_5777_bb13_194de3bba1ac --> a8023de3_411c_8d95_59e9_37549a0c2d75
  a66f2388_87f1_5188_51e6_9a4b91cfd618["card"]
  77c2dc4a_470b_5777_bb13_194de3bba1ac --> a66f2388_87f1_5188_51e6_9a4b91cfd618
  f9e8c1ea_9de4_3e04_ca27_b15cada2e81e["date-fns"]
  77c2dc4a_470b_5777_bb13_194de3bba1ac --> f9e8c1ea_9de4_3e04_ca27_b15cada2e81e
  bfc8708c_7488_3983_8998_32b793781735["react-day-picker"]
  77c2dc4a_470b_5777_bb13_194de3bba1ac --> bfc8708c_7488_3983_8998_32b793781735
  style 77c2dc4a_470b_5777_bb13_194de3bba1ac fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { Calendar } from "@/examples/base/ui/calendar"
import { Card, CardContent } from "@/examples/base/ui/card"
import { addDays } from "date-fns"
import { type DateRange } from "react-day-picker"

export function CalendarRange() {
  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
    from: new Date(new Date().getFullYear(), 0, 12),
    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
  })

  return (
    <Calendar
      mode="range"
      defaultMonth={dateRange?.from}
      selected={dateRange}
      onSelect={setDateRange}
      numberOfMonths={2}
      className="rounded-lg border"
    />
  )
}

Domain

Subdomains

Functions

Dependencies

  • calendar
  • card
  • date-fns
  • react
  • react-day-picker

Source

Frequently Asked Questions

What does calendar-range.tsx do?
calendar-range.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, ContentSourcing subdomain.
What functions are defined in calendar-range.tsx?
calendar-range.tsx defines 1 function(s): CalendarRange.
What does calendar-range.tsx depend on?
calendar-range.tsx imports 5 module(s): calendar, card, date-fns, react, react-day-picker.
Where is calendar-range.tsx in the architecture?
calendar-range.tsx is located at apps/v4/examples/base/calendar-range.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, directory: apps/v4/examples/base).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free