{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar-20", "type": "registry:block", "author": "shadcn (https://ui.shadcn.com)", "description": "With time presets", "registryDependencies": [ "calendar", "card", "button" ], "files": [ { "path": "blocks/calendar-20.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar20() {\n const [date, setDate] = React.useState(\n new Date(2025, 5, 12)\n )\n const [selectedTime, setSelectedTime] = React.useState(\"10:00\")\n const timeSlots = Array.from({ length: 37 }, (_, i) => {\n const totalMinutes = i * 15\n const hour = Math.floor(totalMinutes / 60) + 9\n const minute = totalMinutes % 60\n return `${hour.toString().padStart(2, \"0\")}:${minute\n .toString()\n .padStart(2, \"0\")}`\n })\n\n const bookedDates = Array.from(\n { length: 3 },\n (_, i) => new Date(2025, 5, 17 + i)\n )\n\n return (\n \n \n

\n button]:line-through opacity-100\",\n }}\n className=\"bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]\"\n formatters={{\n formatWeekdayName: (date) => {\n return date.toLocaleString(\"en-US\", { weekday: \"short\" })\n },\n }}\n />\n

\n {timeSlots.map((time) => (\n setSelectedTime(time)}\n className=\"w-full shadow-none\"\n >\n {time}\n \n ))}\n

\n \n \n

\n {date && selectedTime ? (\n <>\n Your meeting is booked for{\" \"}\n \n {\" \"}\n {date?.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n day: \"numeric\",\n month: \"long\",\n })}{\" \"}\n \n at {selectedTime}.\n \n ) : (\n <>Select a date and time for your meeting.\n )}\n

\n \n Continue\n \n \n \n )\n}\n", "type": "registry:component", "target": "" } ], "meta": { "iframeHeight": "600px", "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0", "mobile": "component" }, "categories": [ "calendar", "date" ] }