shadcn.io is an independent project built on shadcn/ui
Select Date opens a dialog with the same title. The days are circles. The 6th, the 14th, and the 25th are bold and tinted, and they can still be picked.
Use it when the calendar is a step, not a fixture on the page. Leave the grid visible if people compare dates often. A Date Picker is the field version. In Svelte, Ark UI does not mark days booked on its own.
Installation
Anatomy
Usage
<Dialog><DialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Select Date</Button>{/snippet}</DialogTrigger><DialogContent class="sm:max-w-fit"><DialogHeader><DialogTitle>Select Date</DialogTitle></DialogHeader><Calendar class="rounded-md border" onValueChange={handleValueChange} value={value}><CalendarViewControl><CalendarPrevTrigger /><CalendarViewDate /><CalendarNextTrigger /></CalendarViewControl><CalendarTable><CalendarWeekDays /><CalendarContext>{#snippet render(calendar)}<CalendarTableBody>{#each calendar().weeks as week (week.map((day) => day.toString()).join("-"))}<CalendarTableRow>{#each week as day (day.toString())}<CalendarTableCell class={cn(
"rounded-full",
isBooked(day) &&
"bg-warning/20 font-bold text-warning-foreground"
)} value={day}>{day.day}</CalendarTableCell>{/each}</CalendarTableRow>{/each}</CalendarTableBody>{/snippet}</CalendarContext></CalendarTable></Calendar></DialogContent></Dialog>FAQ
Which days are highlighted as booked?
The 6th, the 14th and the 25th of the current month are the booked days. isBooked adds bg-warning/20, font-bold and text-warning-foreground on that CalendarTableCell.
How do the days become circles?
Each CalendarTableCell has rounded-full. The cells come from calendar.weeks inside CalendarContext, one CalendarTableRow per week, and the cell value is that day.
Can someone still pick a booked day?
Yes. The booked styling is a class on the day. The calendar still selects a single date, including the 6th, the 14th or the 25th.
How do I read the selected day?
value is a list holding the selected date, and onValueChange receives { value }. This demo starts the list from parseDate(new Date()).
API Reference
Dialog
No extra props in this demo. The rest is on the Dialog page.
Button
Sets props and variant="outline". The rest is on the Button page.
Calendar
Sets onValueChange={handleValueChange}, value={value} and value={day}. The rest is on the Calendar page.
