JollyUI
  1. Docs
  2. Calendar

Calendar

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

Docs

Needs work: The below is a basic example. I am still working on ensuring this is feature complete.

January 2024

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

Installation

Install the following dependencies:

npm install @internationalized/date date-fns

Add the Button component to your project.

The Calendar component uses the Button component. Make sure you have it installed in your project.

Copy and paste the following code into your project.

Loading...

Update the import paths to match your project setup.

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