Skip to content

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

Free

Calendar with Custom Select Day Style in Dialog for Ark UI

A Select Date button that opens round day buttons, with the 6th, 14th, and 25th bold, tinted, and still selectable.

Select Date opens a dialog with the same title. The days are circles. The 6th, the 14th, and the 25th are bold and tinted, and they can still be picked.

Use it when the calendar is a step, not a fixture on the page. Leave the grid visible if people compare dates often. A Date Picker is the field version. In React, Ark UI does not mark days booked on its own.

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

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Select Date</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-fit">
    <DialogHeader>
      <DialogTitle>Select Date</DialogTitle>
    </DialogHeader>
    <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",
{/* 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()).

How is the dialog opened?

DialogTrigger is a button reading Select Date. It opens DialogContent with sm:max-w-fit, and DialogTitle reads Select Date.

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

Dialog

Sets asChild. The rest is on the Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Calendar

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

All 16 calendar examples