Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Calendar with Custom Select Day Style for Svelte

A calendar with round days. The 6th, 14th, and 25th are bold and tinted as booked, and they can still be selected.

UI library: Ark UI

The days are circles. Today has a muted fill. The 6th, the 14th, and the 25th of this month are bold and tinted as booked. Those days can still be selected.

Use it to mark booked days without blocking them. Disable a day only when it must be unavailable. A field that opens this grid is a Date Picker. In Svelte, Ark UI does not know which days are booked.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Calendar anatomy: prev trigger, month select, year select, next trigger, table, table cell

Usage

<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>

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()).

What wraps the grid?

The Calendar className is rounded-md border. That class is the frame around the month. The round days and the booked colors are classes on the day itself.

How are those three dates built?

bookedDays maps 6, 14 and 25 through parseDate for the current month. isBooked is true when booked.compare(date) is 0.

API Reference

Calendar

Sets onValueChange={handleValueChange}, value={value} and value={day}. The rest is on the Calendar page.

All 16 calendar examples