@react-aria/calendar

What is @react-aria/calendar?

@react-aria/calendar is a React library that provides accessible calendar components. It is part of the React Aria collection of hooks and components designed to help developers build accessible web applications. The package includes features for date selection, date range selection, and calendar navigation.

What are @react-aria/calendar's main functionalities?

Date Selection

This feature allows users to select a single date from the calendar. The selected date is logged to the console.

import { Calendar } from '@react-aria/calendar';

function MyCalendar() {
  return (
    <Calendar
      onSelect={(date) => console.log('Selected date:', date)}
    />
  );
}

Date Range Selection

This feature allows users to select a range of dates. The selected date range is logged to the console.

import { RangeCalendar } from '@react-aria/calendar';

function MyRangeCalendar() {
  return (
    <RangeCalendar
      onSelect={(range) => console.log('Selected range:', range)}
    />
  );
}

Calendar Navigation

This feature allows users to navigate through the calendar. The navigated date is logged to the console.

import { Calendar } from '@react-aria/calendar';

function MyNavigableCalendar() {
  return (
    <Calendar
      onNavigate={(date) => console.log('Navigated to:', date)}
    />
  );
}

Other packages similar to @react-aria/calendar

react-datepicker

react-datepicker is a popular date picker component for React. It offers a wide range of features including date and time selection, date range selection, and custom date formats. Compared to @react-aria/calendar, react-datepicker has a more extensive set of features but may not be as focused on accessibility.

react-day-picker

react-day-picker is a flexible date picker component for React. It supports single date selection, date range selection, and custom styling. While it provides a lot of customization options, it may require more effort to ensure accessibility compared to @react-aria/calendar.

react-calendar

react-calendar is a simple and lightweight calendar component for React. It supports date selection and navigation. It is easy to use and integrate but may lack some of the advanced features and accessibility focus of @react-aria/calendar.

README

@react-aria/calendar

This package is part of react-spectrum. See the repo for more details.