Calendar
A month grid for a day, several days, or a range
November 2026
MTWTFSS
26
27
28
29
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
4
5
6
Value: 2026-11-07
October 2026
MTWTFSS
28
29
30
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
31
1
2
3
4
5
6
7
8
November 2026
MTWTFSS
26
27
28
29
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
4
5
6
Value: 2026-10-19 → 2026-10-23
MTWTFSS
26
27
28
29
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
4
5
6
Value: 2026-11-07
Installation
npx shadcn@latest add @sudokw/components-calendarimport { Calendar } from "@gpuixui/components";Usage
import { Calendar } from "@gpuixui/components/calendar";
import { useState } from "react";
export const ReviewDate = () => {
const [day, setDay] = useState<string | null>("2026-10-17");
return <Calendar selected={day} onSelect={setDay} today="2026-10-17" />;
};<Calendar
mode="range"
numberOfMonths={2}
disabled={{ weekdays: [0, 6] }}
selected={range}
onSelect={setRange}
today="2026-10-17"
/>API reference
Calendar
| Prop | Type | Default | Consequence |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | selects the value shape selected and onSelect speak |
selected | string | null · ReadonlyArray<string> · { from, to } | null | none | the controlled selection, typed by mode |
onSelect | (day | days | range) => void | none | the next selection; the component never stores it |
numberOfMonths | 1 | 2 | 1 | months painted side by side, sharing one nav pair |
showOutsideDays | boolean | true | paints the neighbouring months' days, which are also selectable |
captionLayout | "label" | "dropdown" | "label" | a month caption, or month and year jump controls |
weekStartsOn | 0 | 1 | 1 | the first column: Sunday (0) or Monday (1) |
fromYear / toYear | number | today ± 10 | the years a dropdown or a Shift page may reach |
disabled | { before?, after?, range?, weekdays?, filter? } | none | refuses days; before/after also bound paging and the arrows |
today | string | the runtime clock | the ISO day painted as today; pass it for a deterministic surface |
defaultMonth | string | the selection or today | the ISO day whose month the grid opens on |
autoFocus | boolean | false | takes focus on mount, for a calendar opened inside a popover |
label | string | "Calendar" | the grid's accessible name, followed by the selection summary |
onDismiss | () => void | none | called by Escape; a popover passes its close |
className | string | none | joined after the recipe, so it wins conflicts |
Keyboard
- Arrow LeftArrow Right
- moves a day
- Arrow DownArrow Up
- moves a week
- HomeEnd
- the week's first or last day
- Page UpPage Down
- the previous or next month; with Shift, the same month a year away
- EnterSpace
- chooses the focused day
- Escape
- closes the surface that opened the calendar
read from calendar.tsx, logic.ts
Edit this page on GitHubapps/docs/content/docs/components/calendar.mdx