Calendar

A month grid to pick a day, or a period with RangeCalendar. The locale names the months and days; firstDayOfWeek overrides where the week starts. Use DatePicker in forms, where people can also type the date.

Language

Appearance

Pick a day

import { getLocalTimeZone, today } from '@internationalized/date';
import type { CalendarDate } from '@internationalized/date';
import { useState } from 'react';
import { useDateFormatter } from 'react-aria';
import { Calendar } from '@arbol-ai/ui';

const SingleExample = () => {
  const [date, setDate] = useState<CalendarDate>(() => today(getLocalTimeZone()).add({ days: 3 }));
  const formatter = useDateFormatter({ dateStyle: 'full' });
  return (
    <div className="grid justify-items-start gap-3">
      <Calendar aria-label="Follow-up call" onChange={setDate} value={date} />
      <p className="text-muted-foreground text-sm">
        Follow-up call: {formatter.format(date.toDate(getLocalTimeZone()))}
      </p>
    </div>
  );
};

<SingleExample />

Pick a period

The first press sets one end, the second the other; the days between form one band.

import { getLocalTimeZone, today } from '@internationalized/date';
import { RangeCalendar } from '@arbol-ai/ui';

const RangeExample = () => {
  const now = today(getLocalTimeZone());
  return (
    <RangeCalendar
      aria-label="Campaign period"
      defaultValue={{ start: now.subtract({ days: 6 }), end: now }}
    />
  );
};

<RangeExample />

Week starting on Monday, weekends unavailable

Days before today are disabled and weekends are struck through: both stay out of reach of a booking.

import { getLocalTimeZone, isWeekend, today } from '@internationalized/date';
import { useLocale } from 'react-aria-components';
import { Calendar } from '@arbol-ai/ui';

const BookingExample = () => {
  const { locale } = useLocale();
  return (
    <Calendar
      aria-label="Appointment day"
      firstDayOfWeek="mon"
      isDateUnavailable={(date) => isWeekend(date, locale)}
      minValue={today(getLocalTimeZone())}
    />
  );
};

<BookingExample />

Source

The examples above are src/components/calendar/calendar.examples.tsx, which the library’s tests render too.