@react-aria/calendar

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)}
    />
  );
}