Components

Calendar

Shadcn

A calendar component that allows users to select dates.

Demo

January 2026
SuMoTuWeThFrSa
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
31

Selected date:

No date selected

Multiple Months

June 2025
SuMoTuWeThFrSa
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
July 2025
SuMoTuWeThFrSa
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

Date Range

January 2026
SuMoTuWeThFrSa
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
31
February 2026
SuMoTuWeThFrSa
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

Selected range:

No range selected

Multiple Dates

June 2025
SuMoTuWeThFrSa
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
July 2025
SuMoTuWeThFrSa
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

With Constraints

January 2026
SuMoTuWeThFrSa
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
31

Min Date

June 2025
SuMoTuWeThFrSa
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

Max Date

June 2025
SuMoTuWeThFrSa
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

Disabled Dates (Weekends)

June 2025
SuMoTuWeThFrSa
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

Month and Year Dropdown

SuMoTuWeThFrSa
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

Date Picker with Popover

Installation

pnpm add @internationalized/date

Calendar requires @internationalized/date for date handling.

Documentation

For full documentation including date range picker and preset options, see the official shadcn-svelte documentation.

Key Props

  • type - "single" | "range" | "multiple"
  • value - Selected date(s)
  • minValue - Minimum selectable date
  • maxValue - Maximum selectable date
  • isDateDisabled - Function to disable specific dates
  • numberOfMonths - Number of months to display
  • captionLayout - "label" | "dropdown" | "dropdown-months" | "dropdown-years"
  • locale - Locale string (default: "en-US")