JollyUI
  1. Docs
  2. components
  3. Calendar

Calendar

A date field component that allows users to enter and edit date.

Docs

March 2024

25
26
27
28
29
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

Installation

npx @sly-cli/sly add jolly-ui calendar

Note: Only the default style can be installed via CLI at the moment

Usage

import {
  Calendar,
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell,
  CalendarHeading,
} from "@/registry/default/ui/calendar"
 
return (
  <Calendar>
    <CalendarHeading />
    <CalendarGrid>
      <CalendarGridHeader>
        {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
      </CalendarGridHeader>
      <CalendarGridBody>
        {(date) => (
          <>
            <CalendarCell date={date} />
          </>
        )}
      </CalendarGridBody>
    </CalendarGrid>
  </Calendar>
)

Date Picker

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

MenuDate Picker