Skip to content

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

Free

Calendar with Custom Select Day Style for Ark UI

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, Ark 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"
  onValueChange={handleValueChange}
  value={value}
>
  <CalendarViewControl>
    <CalendarPrevTrigger />
    <CalendarViewDate />
    <CalendarNextTrigger />
  </CalendarViewControl>
  <CalendarTable>
    <CalendarWeekDays />
    <CalendarContext>
      {(calendar) => (
        <CalendarTableBody>
          {calendar.weeks.map((week) => (
            <CalendarTableRow
              key={week.map((day) => day.toString()).join("-")}
            >
              {week.map((day) => (
                <CalendarTableCell
                  className={cn(
                    "rounded-full",
                    isBooked(day) &&
                      "bg-warning/20 font-bold text-warning-foreground"
                  )}
                  key={day.toString()}
                  value={day}
                >
                  {day.day}
                </CalendarTableCell>
{/* The rest of the file is under Installation. */}

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}, week, map, day and value={day}. The rest is on the Calendar page.

All 16 calendar examples