calendar-11
showcase-elevenlabs/calendar-11FreeBlock
Start and end of month
Install it
npx shadcn@latest add https://raw.githubusercontent.com/elevenlabs/showcase/main/apps/www/public/r/styles/new-york/calendar-11.jsonSource
1"use client"23import * as React from "react"4import { type DateRange } from "react-day-picker"56import { Calendar } from "@/registry/new-york/ui/calendar"78export default function Calendar11() {9 const [dateRange, setDateRange] = React.useState<DateRange | undefined>({10 from: new Date(2025, 5, 17),11 to: new Date(2025, 5, 20),12 })1314 return (15 <div className="flex min-w-0 flex-col gap-2">16 <Calendar17 mode="range"18 selected={dateRange}19 onSelect={setDateRange}20 numberOfMonths={2}21 startMonth={new Date(2025, 5, 1)}22 endMonth={new Date(2025, 6, 31)}23 disableNavigation24 className="rounded-lg border shadow-sm"25 />26 <div className="text-muted-foreground text-center text-xs">27 We are open in June and July only.28 </div>29 </div>30 )31}
What it pulls in
Other registry items
Files it writes
More from shadcn/ui
All 357 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| calendar-01calendar-01 | shadcn/ui | Blocks | Free | no deps | |
| calendar-02calendar-02 | shadcn/ui | Blocks | Free | no deps | |
| calendar-03calendar-03 | shadcn/ui | Blocks | Free | no deps | |
| calendar-04calendar-04 | shadcn/ui | Blocks | Free | no deps | |
| calendar-05calendar-05 | shadcn/ui | Blocks | Free | no deps | |
| calendar-06calendar-06 | shadcn/ui | Blocks | Free | no deps | |
| calendar-07calendar-07 | shadcn/ui | Blocks | Free | no deps | |
| calendar-08calendar-08 | shadcn/ui | Blocks | Free | no deps |
