Calendar27() — ui Function Reference

Architecture documentation for the Calendar27() function in calendar-27.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar27() — ui Function Reference

Dependency Diagram

graph TD
  51a9aa61_92f4_d958_a44b_4c3cbe476601["Calendar27()"]
  eb4b9b59_f307_66b5_1438_84395bd422b0["calendar-27.tsx"]
  51a9aa61_92f4_d958_a44b_4c3cbe476601 -->|defined in| eb4b9b59_f307_66b5_1438_84395bd422b0
  style 51a9aa61_92f4_d958_a44b_4c3cbe476601 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/blocks/calendar-27.tsx lines 72–177

export default function Calendar27() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(2025, 5, 5),
    to: new Date(2025, 5, 20),
  })
  const filteredData = React.useMemo(() => {
    if (!range?.from && !range?.to) {
      return chartData
    }

    return chartData.filter((item) => {
      const date = new Date(item.date)
      return date >= range.from! && date <= range.to!
    })
  }, [range])

  return (
    <Card className="@container/card w-full max-w-xl">
      <CardHeader className="@md/card:grid relative flex flex-col border-b">
        <CardTitle>Web Analytics</CardTitle>
        <CardDescription>
          Showing total visitors for this month.
        </CardDescription>
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline" className="absolute right-4 top-4">
              <CalendarIcon />
              {range?.from && range?.to
                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
                : "June 2025"}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto overflow-hidden p-0" align="end">
            <Calendar
              className="w-full"
              mode="range"
              defaultMonth={range?.from}
              selected={range}
              onSelect={setRange}
              disableNavigation
              startMonth={range?.from}
              fixedWeeks
              showOutsideDays
              disabled={{
                after: new Date(2025, 5, 31),
              }}
            />
          </PopoverContent>
        </Popover>
      </CardHeader>
      <CardContent className="px-4">
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-[250px] w-full"
        >
          <BarChart
            accessibilityLayer
            data={filteredData}
            margin={{
              left: 12,
              right: 12,
            }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={20}
              tickFormatter={(value) => {
                const date = new Date(value)
                return date.toLocaleDateString("en-US", {
                  day: "numeric",
                })
              }}
            />
            <ChartTooltip
              content={
                <ChartTooltipContent
                  className="w-[150px]"