Calendar

A calendar component that allows users to select a date or a range of dates.

September 2026

Su	Mo	Tu	We	Th	Fr	Sa
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	1	2	3

1
import { Calendar } from "@/components/ui/pxl/calendar";
2

3

4
export default function CalendarPreview() {
5
  return (
6
    <Calendar className="p-2" />
7
  )
8
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/calendar

Install the following dependencies:

pnpm add react-day-picker

Copy and paste the following code into your project.

1
import { type ComponentProps, useEffect, useRef } from "react";
2
import {
3
  type DayButton,
4
  DayPicker,
5
  getDefaultClassNames,
6
  type Locale,
7
} from "react-day-picker";
8

9
import { Button, buttonVariants } from "@/components/ui/pxl/button";
10
import {
11
  Select,
12
  SelectContent,
13
  SelectItem,
14
  SelectTrigger,
15
  SelectValue,
16
} from "@/components/ui/pxl/select";
17
import { cn } from "@/lib/utils";
18

19
function Calendar({
20
  className,
21
  classNames,
22
  showOutsideDays = true,
23
  captionLayout = "label",
24
  buttonVariant = "ghost",
25
  locale,
26
  formatters,
27
  components,
28
  ...props
29
}: ComponentProps<typeof DayPicker> & {
30
  buttonVariant?: ComponentProps<typeof Button>["variant"];
31
}) {
32
  const defaultClassNames = getDefaultClassNames();
33

34
  return (
35
    <DayPicker
36
      showOutsideDays={showOutsideDays}
37
      className={cn(
38
        "group/calendar bg-background [--cell-size:--spacing(1.75)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
39
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
40
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
41
        className,
42
      )}
43
      captionLayout={captionLayout}
44
      locale={locale}
45
      formatters={{
46
        formatMonthDropdown: (date) =>
47
          date.toLocaleString(locale?.code, { month: "short" }),
48
        ...formatters,
49
      }}
50
      classNames={{
51
        root: "w-auto h-[stretch]",
52
        months: cn(
53
          "relative flex flex-col gap-4 md:flex-row",
54
          defaultClassNames.months,
55
        ),
56
        month: "flex w-full flex-col gap-0.5",
57
        nav: cn(
58
          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
59
          defaultClassNames.nav,
60
        ),
61
        button_previous: cn(
62
          buttonVariants({ variant: buttonVariant }),
63
          "border-none size-3 bg-transparent p-0 flex items-center justify-center hover:opacity-50",
64
          defaultClassNames.button_previous,
65
        ),
66
        button_next: cn(
67
          buttonVariants({ variant: buttonVariant }),
68
          "border-none size-3 bg-transparent p-0 flex items-center justify-center hover:opacity-50",
69
          defaultClassNames.button_next,
70
        ),
71
        month_caption:
72
          "flex h-3 w-full items-center justify-center px-(--cell-size) mb-0.5",
73
        dropdowns: cn(
74
          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
75
          defaultClassNames.dropdowns,
76
        ),
77
        dropdown_root: cn(
78
          "relative rounded-(--cell-radius)",
79
          defaultClassNames.dropdown_root,
80
        ),
81
        dropdown: cn(
82
          "absolute inset-0 bg-popover opacity-0",
83
          defaultClassNames.dropdown,
84
        ),
85
        caption_label: "text-xs font-medium",
86
        // table: "w-full border-collapse",
87
        weekdays: "hidden",
88
        weekday: cn(
89
          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
90
          defaultClassNames.weekday,
91
        ),
92
        week: "flex w-full",
93
        week_number_header: cn(
94
          "w-(--cell-size) select-none",
95
          defaultClassNames.week_number_header,
96
        ),
97
        week_number: cn(
98
          "text-[0.8rem] text-muted-foreground select-none",
99
          defaultClassNames.week_number,
100
        ),
101
        day: cn(
102
          "relative w-full h-full p-0 text-center group/day select-none text-2xs",
103
        ),
104
        range_start: cn(
105
          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
106
          defaultClassNames.range_start,
107
        ),
108
        range_middle: cn("rounded-none", defaultClassNames.range_middle),
109
        range_end: cn(
110
          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
111
          defaultClassNames.range_end,
112
        ),
113
        today: cn(
114
          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
115
          defaultClassNames.today,
116
        ),
117
        outside: cn(
118
          "text-muted-foreground aria-selected:text-muted-foreground",
119
          defaultClassNames.outside,
120
        ),
121
        disabled: cn(
122
          "text-muted-foreground opacity-50",
123
          defaultClassNames.disabled,
124
        ),
125
        hidden: cn("invisible", defaultClassNames.hidden),
126
        ...classNames,
127
      }}
128
      components={{
129
        Root: ({ className, rootRef, ...props }) => {
130
          return (
131
            <div
132
              data-slot="calendar"
133
              ref={rootRef}
134
              className={cn(className)}
135
              {...props}
136
            />
137
          );
138
        },
139
        Chevron: ({ className, orientation, ...props }) => {
140
          if (orientation === "left") {
141
            return (
142
              <svg
143
                className={cn("size-4 shrink-0", className)}
144
                {...props}
145
                xmlns="http://www.w3.org/2000/svg"
146
                fill="currentColor"
147
                viewBox="0 0 24 24"
148
              >
149
                <path d="M8 13v-2h2v2H8Zm2-2V9h2v2h-2Zm0 4v-2h2v2h-2Zm2-6V7h2v2h-2Zm0 8v-2h2v2h-2Zm2-10V5h2v2h-2Zm0 12v-2h2v2h-2Z" />
150
              </svg>
151
            );
152
          }
153

154
          if (orientation === "right") {
155
            return (
156
              <svg
157
                className={cn("size-4 shrink-0", className)}
158
                {...props}
159
                xmlns="http://www.w3.org/2000/svg"
160
                fill="currentColor"
161
                viewBox="0 0 24 24"
162
              >
163
                <path d="M16 13v-2h-2v2h2Zm-2-2V9h-2v2h2Zm0 4v-2h-2v2h2Zm-2-6V7h-2v2h2Zm0 8v-2h-2v2h2ZM10 7V5H8v2h2Zm0 12v-2H8v2h2Z" />
164
              </svg>
165
            );
166
          }
167

168
          return (
169
            <svg
170
              className={cn("size-4", className)}
171
              xmlns="http://www.w3.org/2000/svg"
172
              fill="currentColor"
173
              viewBox="0 0 24 24"
174
            >
175
              <path d="M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z" />
176
            </svg>
177
          );
178
        },
179
        DayButton: ({ ...props }) => (
180
          <CalendarDayButton locale={locale} {...props} />
181
        ),
182
        MonthsDropdown: ({ className, ...props }) => {
183
          const currentMonth = props.value as number;
184

185
          const months = [
186
            "January",
187
            "February",
188
            "March",
189
            "April",
190
            "May",
191
            "June",
192
            "July",
193
            "August",
194
            "September",
195
            "October",
196
            "November",
197
            "December",
198
          ];
199

200
          const currentMonthName = months[currentMonth];
201

202
          return (
203
            <div className={cn("flex flex-col gap-3 text-2xs", className)}>
204
              <Select defaultValue={currentMonthName}>
205
                <SelectTrigger id="dropdown" className="bg-background w-full">
206
                  <SelectValue placeholder="Dropdown" />
207
                </SelectTrigger>
208
                <SelectContent align="center">
209
                  {months.map((month) => (
210
                    <SelectItem key={month} value={month}>
211
                      {month}
212
                    </SelectItem>
213
                  ))}
214
                </SelectContent>
215
              </Select>
216
            </div>
217
          );
218
        },
219
        WeekNumber: ({ children, ...props }) => {
220
          return (
221
            <td {...props}>
222
              <div className="flex size-(--cell-size) items-center justify-center text-center">
223
                {children}
224
              </div>
225
            </td>
226
          );
227
        },
228
        YearsDropdown: ({ className }) => {
229
          const currentYear = new Date().getFullYear();
230
          const years = Array.from(
231
            { length: currentYear - 1925 + 1 },
232
            (_, i) => 1925 + i,
233
          );
234

235
          return (
236
            <div className={cn("flex flex-col gap-3 text-xs", className)}>
237
              <Select defaultValue={currentYear?.toString()}>
238
                <SelectTrigger id="dropdown" className="bg-background w-full">
239
                  <SelectValue placeholder="Dropdown" />
240
                </SelectTrigger>
241
                <SelectContent align="center">
242
                  {years.map((year) => (
243
                    <SelectItem key={year} value={year.toString()}>
244
                      {year}
245
                    </SelectItem>
246
                  ))}
247
                </SelectContent>
248
              </Select>
249
            </div>
250
          );
251
        },
252
        ...components,
253
      }}
254
      {...props}
255
    />
256
  );
257
}
258

259
function CalendarDayButton({
260
  className,
261
  day,
262
  modifiers,
263
  locale,
264
  ...props
265
}: ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
266
  const defaultClassNames = getDefaultClassNames();
267

268
  const ref = useRef<HTMLButtonElement>(null);
269
  useEffect(() => {
270
    if (modifiers.focused) ref.current?.focus();
271
  }, [modifiers.focused]);
272

273
  return (
274
    <Button
275
      ref={ref}
276
      variant="ghost"
277
      size="icon"
278
      data-day={day.date.toLocaleDateString(locale?.code)}
279
      data-selected-single={
280
        modifiers.selected &&
281
        !modifiers.range_start &&
282
        !modifiers.range_end &&
283
        !modifiers.range_middle
284
      }
285
      data-range-start={modifiers.range_start}
286
      data-range-end={modifiers.range_end}
287
      data-range-middle={modifiers.range_middle}
288
      className={cn(
289
        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-2xs [&>span]:opacity-70",
290
        defaultClassNames.day,
291
        className,
292
      )}
293
      {...props}
294
    />
295
  );
296
}
297

298
export { Calendar, CalendarDayButton };

Update the import paths to match your project setup.

Usage

import { Calendar } from "@/components/ui/calendar"

const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)

See the React DayPicker documentation for more information.

About

The Calendar component is built on top of React DayPicker.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

Persian / Hijri / Jalali Calendar

To use the Persian calendar, edit components/ui/calendar.tsx and replace react-day-picker with react-day-picker/persian.

import { DayPicker } from "react-day-picker"
import { DayPicker } from "react-day-picker/persian"

Selected Date (With TimeZone)

The Calendar component accepts a timeZone prop to ensure dates are displayed and selected in the user’s local timezone.

export function CalendarWithTimezone() {
  const [date, setDate] = React.useState<Date | undefined>(undefined)
  const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined)

  React.useEffect(() => {
    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
  }, [])

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      timeZone={timeZone}
    />
  )
}

Note: If you notice a selected date offset (for example, selecting the 20th highlights the 19th), make sure the timeZone prop is set to the user’s local timezone.

Why client-side? The timezone is detected using Intl.DateTimeFormat().resolvedOptions().timeZone inside a useEffect to ensure compatibility with server-side rendering. Detecting the timezone during render would cause hydration mismatches, as the server and client may be in different timezones.

Range Calendar

Use the mode="range" prop to enable range selection.

Month and Year Selector

Use captionLayout="dropdown" to show month and year dropdowns.

Custom Cell Size

You can customize the size of calendar cells using the --cell-size CSS variable. You can also make it responsive by using breakpoint-specific values:

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>

Or use fixed values:

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>

Week Numbers

Use showWeekNumber to show week numbers.

API Reference

See the React DayPicker documentation for more information on the Calendar component.