react-calendar-kit

React Calendar Kit is a powerful and flexible library for building accessible and highly customizable calendar and date/time picker components in your React applications. React Calendar Kit provides a solid foundation for creating inclusive user experiences.

Getting Started

React Calendar Kit includes several libraries, which you can choose depending on your use-case.

• React Aria is a collection of unstyled React components and hooks that helps you build accessible, high quality UI components for your own application or design system. If you're building a component library for the web from scratch with your own styling, start here.
• React Stately is a library of state management hooks for use in your component library. If you're using React Aria, you'll likely also use React Stately, but it can also be used independently (e.g. on other platforms like React Native).

Documentation

Visit https://react-calendar-kit.vercel.app to view the full documentation.

Install

This package includes two peer dependencies, namely @internationalized/date and @react-aria/i18n, which are necessary for parsing the date as a value of the kit.

1npm install -D react-calendar-kit

1yarn add -D react-calendar-kit

1pnpm i -D react-calendar-kit

Add Core components to your app

It can be placed anywhere, even in server components such as ui/primitives.tsx.

1import React, { forwardRef, type ElementRef } from 'react';
2import {
3  CalendarKit,
4  type CalendarProps,
5  type DateInputProps,
6  type DateRangeInputProps,
7  type RangeCalendarProps,
8  type TimeInputProps,
9} from 'react-calendar-kit';
10
11import { cn } from '../../utils';
12
13const Calendar = forwardRef<ElementRef<typeof CalendarKit.Calendar>, CalendarProps>((props, ref) => (
14  <CalendarKit.Calendar ref={ref} {...props} />
15));
16const RangeCalendar = forwardRef<ElementRef<typeof CalendarKit.RangeCalendar>, RangeCalendarProps>((props, ref) => (
17  <CalendarKit.RangeCalendar ref={ref} {...props} />
18));
19
20const DateRangeInput = forwardRef<ElementRef<typeof CalendarKit.DateRangeInput>, DateRangeInputProps>((props, ref) => (
21  <CalendarKit.DateRangeInput ref={ref} {...props} />
22));
23
24const DateInput = forwardRef<ElementRef<typeof CalendarKit.DateInput>, DateInputProps>((props, ref) => (
25  <CalendarKit.DateInput ref={ref} {...props} />
26));
27
28const TimeInput = forwardRef<ElementRef<typeof CalendarKit.TimeInput>, TimeInputProps>((props, ref) => (
29  <CalendarKit.TimeInput ref={ref} {...props} />
30));
31
32export const CK = {
33  RangeCalendar,
34  Calendar,
35  DateInput,
36  TimeInput,
37  DateRangeInput,
38};

Customize Component Styles

React Calendar Kit components are intentionally unstyled by default. This design choice gives you the freedom to apply your own styles and seamlessly integrate the calendar into the aesthetic of your application.