shadcn.io is an independent project built on shadcn/ui
The button shows a calendar icon and today's date. In the month, the days are round, and the 6th, the 14th and the 25th are bold on a tinted background.
Bold a day when it means something, such as a booked date. A Calendar can mark the same days outside a field. Ark UI in Vue does not know which days are booked.
Installation
Anatomy
Usage
h(DatePicker as never, { onValueChange: handleValueChange, positioning: positioning, value: value.value }, [h(DatePickerTrigger as never, { asChild: true }, h(Button as never, { class: "w-70 justify-start font-normal", variant: "outline" }, [h(CalendarIcon as never, { "aria-hidden": "true", "data-icon": "inline-start" }), h("span" as never, {}, [date ? formatDate(date) : "Pick a date"])])), h(DatePickerContent as never, {}, [h(CalendarViewControl as never, {}, [h(CalendarPrevTrigger as never, {}), h(CalendarViewDate as never, {}), h(CalendarNextTrigger as never, {})]), h(CalendarTable as never, {}, [h(CalendarWeekDays as never, {}), h(CalendarContext as never, {}, { default: (calendar: SlotProps<typeof CalendarContext>) => (
h(CalendarTableBody as never, {}, [calendar.weeks.map((week) => (
h(CalendarTableRow as never, { key: week.map((day) => day.toString()).join("-") }, [week.map((day) => (
h(CalendarTableCell as never, { class: cn(
"rounded-full",
isBooked(day) &&
"bg-warning/20 font-bold text-warning-foreground"
), key: day.toString(), value: day }, [day.day])
))])
))])
) })])])])FAQ
How are the booked days styled?
The example renders the month's weeks itself and gives each day cell rounded-full, plus bg-warning/20 font-bold text-warning-foreground when the day is in the booked list. The selected day keeps the primary fill.
Which days are booked?
The 6th, 14th and 25th of the current month, built once when the module loads. Replace the list with dates from your data.
Can a booked day still be picked?
Yes, the styling doesn't change behavior. To block those days, return true for them from isDateUnavailable, as the disabled dates example does.
What does the button say?
The selected date in long form, such as October 10, 2026, or Pick a date when nothing is selected. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.
