Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Standard

Calendar with Custom Select Day Style for React

A calendar with round days that highlights booked dates in bold.

Framework
UI library

A Calendar whose days are circles, with three booked days of the current month shaded in the warning color and set in bold. The selected day keeps the primary fill. Use it to mark holidays, deadlines or days that are already full, where the color tells people something before they pick.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which days are highlighted as booked?

The 6th, the 14th and the 25th of the current month are the booked modifier. modifiersClassNames.booked paints the day button with bg-warning/20, font-bold and text-warning-foreground.

How do the days become circles?

classNames.day_button is rounded-full. classNames.today is rounded-full bg-muted text-foreground.

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?

mode="single" makes selected one date and onSelect the setter. This demo stores that date in state, starting from 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 new Date(year, month, day) for the current month, then passes them as modifiers.booked.

All 16 calendar examples