Getting Started

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.

React Calendar Kit includes several libraries, which you can choose depending on your usecase.

React Aria (opens in a new tab) 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 (opens in a new tab) 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).

Install

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

pnpm i react-calendar-kit

Add Core components to your app

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

import React, { forwardRef, type ElementRef } from 'react';
import {
  CalendarKit,
  type CalendarProps,
  type DateInputProps,
  type DateRangeInputProps,
  type RangeCalendarProps,
  type TimeInputProps,
} from 'react-calendar-kit';
 
import { cn } from '../../utils';
 
const Calendar = forwardRef<ElementRef<typeof CalendarKit.Calendar>, CalendarProps>((props, ref) => (
  <CalendarKit.Calendar ref={ref} {...props} />
));
const RangeCalendar = forwardRef<ElementRef<typeof CalendarKit.RangeCalendar>, RangeCalendarProps>((props, ref) => (
  <CalendarKit.RangeCalendar ref={ref} {...props} />
));
 
const DateRangeInput = forwardRef<ElementRef<typeof CalendarKit.DateRangeInput>, DateRangeInputProps>((props, ref) => (
  <CalendarKit.DateRangeInput ref={ref} {...props} />
));
 
const DateInput = forwardRef<ElementRef<typeof CalendarKit.DateInput>, DateInputProps>((props, ref) => (
  <CalendarKit.DateInput ref={ref} {...props} />
));
 
const TimeInput = forwardRef<ElementRef<typeof CalendarKit.TimeInput>, TimeInputProps>((props, ref) => (
  <CalendarKit.TimeInput ref={ref} {...props} />
));
 
export const CK = {
  RangeCalendar,
  Calendar,
  DateInput,
  TimeInput,
  DateRangeInput,
};

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.

To get started with styling, visit our comprehensive Style Guide. The guide provides detailed instructions and best practices for customizing the look and feel of your calendar components.

Whether you prefer to use plain CSS, a preprocessor like SCSS, or a CSS-in-JS library, our examples will help you apply the styles that best suit your needs. Additionally, the guide includes tips for theming, handling state-based styles, and ensuring that your calendar remains accessible and responsive.

Calendar