1. Components
  2. calendar

Calendar

Monthly calendar view for browsing and selecting dates.

React Aria

Demo

April 2026

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
import { Calendar } from "@/components/jk/calendar"


export const CalendarDemo = () => {
  return (
    <div>
        <Calendar />
    </div>
  )
}

Installation

terminal
npx shadcn@latest add @jk-ui/calendar

examples

With Month and Year Pickers

April 2026

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
"use client"

import { CalendarMonthYearHeader, CalendarGrid, CalendarCell, CalendarGridHeader } from '@/components/jk/calendar'
import { CalendarGridBody } from 'react-aria-components'

import { Calendar } from 'react-aria-components'

export const CalendarWithMy = () => {
    return (
        <Calendar className={"flex flex-col font-sans w-[calc(9*var(--spacing)*7)] max-w-full @container"}>
           <CalendarMonthYearHeader/>

            <CalendarGrid>
                <CalendarGridHeader />
                <CalendarGridBody>
                    {(date) => <CalendarCell date={date} />}
                </CalendarGridBody>
            </CalendarGrid>
        </Calendar>
    )
}
Prev
Range Calendar

Calendar view for selecting a continuous date range.

Next
On this page