Sections

Components

Utilities

Forms

Hooks

useIsMobile

Calendar

Copy Markdown

Select a date or a range of dates.

Docs API

PreviewCode

July 2026

S	M	T	W	T	F	S

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

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/calendar

Anatomy#

Calendar
├── CalendarViewControl
│ ├── CalendarPrevTrigger
│ ├── CalendarMonthSelect
│ ├── CalendarYearSelect
│ ├── CalendarViewDate
│ └── CalendarNextTrigger
└── CalendarTable
    ├── CalendarWeekDays
    └── CalendarTableDays

Usage#

import {
  Calendar,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarViewDate,
  CalendarWeekDays,
} from "@/components/ui/calendar";

<Calendar>
  <CalendarViewControl>
    <CalendarPrevTrigger />
    <CalendarViewDate />
    <CalendarNextTrigger />
  </CalendarViewControl>
  <CalendarTable>
    <CalendarWeekDays />
    <CalendarTableDays />
  </CalendarTable>
</Calendar>

Controlled#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

19001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099

S	M	T	W	T	F	S

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

2026-07-02

Examples#

Date Range#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

S	M	T	W	T	F	S

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

Month and Year Selector#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

S	M	T	W	T	F	S

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

With Presets#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

S	M	T	W	T	F	S

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

Last 7 daysLast 14 daysLast 30 daysThis month

Multiple Months#

PreviewCode

July 2026 - August 2026

S	M	T	W	T	F	S

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

S	M	T	W	T	F	S

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

31

1

2

3

4

5

Min and Max#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

2025

S	M	T	W	T	F	S

23

24

25

26

27

28

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

Select Today#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

S	M	T	W	T	F	S

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

Today

Fixed Weeks#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

S	M	T	W	T	F	S

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

Booked Dates#

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

S	M	T	W	T	F	S

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

Custom Cell Size#

Use [--cell-size:--spacing("value")] to set the size of the calendar cells.

Default value is --spacing(9).

PreviewCode

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

S	M	T	W	T	F	S

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

You can use breakpoint utilities to change the cell size at different screen sizes.

md:[--cell-size:--spacing(10)] lg:[--cell-size:--spacing(12)]

API Reference#

Calendar#

Root component. Manages date view, selection, and navigation.

Prop	Type	Default
`value`	`DateValue[]`	-
`defaultValue`	`DateValue[]`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`selectionMode`	`"single"	"range"
`min`	`DateValue`	-
`max`	`DateValue`	-
`isDateUnavailable`	`(date: DateValue) => boolean`	-
`fixedWeeks`	`boolean`	`false`
`outsideDaySelectable`	`boolean`	`false`
`numOfMonths`	`number`	`1`
`className`	`string`	-
`asChild`	`boolean`	`false`

CSS Variable	Default
`--cell-size`	`--spacing(9)`

CalendarViewControl#

Holds prev/next buttons and month/year selects.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

CalendarMonthSelect#

Month selector dropdown. Uses NativeSelect internally.

Prop	Type	Default
`format`	`"short"	"long"`
`className`	`string`	-

CalendarYearSelect#

Year selector dropdown.

Prop	Type	Default
`className`	`string`	-

CalendarTable#

Table layout for the calendar day grid.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

CalendarWeekDays#

Header row with week day names (Sun–Sat).

Prop	Type	Default
`format`	`"narrow"	"short"
`className`	`string`	-

CalendarTableDays#

Body with day cells for the current month.

Prop	Type	Default
`className`	`string`	-

CalendarTableNextMonth#

Body for additional month(s).

Prop	Type	Default
`months`	`number`	`1`
`className`	`string`	-

CalendarTableCell#

Single day cell. Clickable for selection. Shows disabled/outside styling.

Prop	Type	Default
`value`	`DateValue`	-
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

[

Button ](/docs/components/button)[

Card ](/docs/components/card)

On This Page

Installation Anatomy Usage Controlled Examples Date Range Month and Year Selector With Presets Multiple Months Min and Max Select Today Fixed Weeks Booked Dates Custom Cell Size API Reference Calendar CalendarViewControl CalendarMonthSelect CalendarYearSelect CalendarTable CalendarWeekDays CalendarTableDays CalendarTableNextMonth CalendarTableCell