Skip to content

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

Free

Calendar with Custom Select Day Style for React

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

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 React, Base UI does not know which days are booked.

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

Anatomy

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

Usage

<Calendar
  className="rounded-md border"
  classNames={classNames}
  mode="single"
  modifiers={modifiers}
  modifiersClassNames={modifiersClassNames}
  onSelect={setDate}
  selected={date}
/>

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.

API Reference

Calendar

Sets classNames={classNames}, mode="single", modifiers={modifiers}, modifiersClassNames={modifiersClassNames}, onSelect={setDate} and selected={date}. The rest is on the Calendar page.

All 16 calendar examples