MultiCalendar

MultiCalendar

The MultiCalendar component displays multiple months side by side with synchronized navigation.

Basic Usage

import { MultiCalendar } from '@thaparoyal/calendar-react';
import type { DateRangeValue } from '@thaparoyal/calendar-react';

function MyMultiCalendar() {
  const [range, setRange] = useState<DateRangeValue | null>(null);

  return (
    <MultiCalendar.Root
      numberOfMonths={2}
      mode="range"
      config={{ calendarType: 'BS', locale: 'en' }}
      value={range}
      onValueChange={setRange}
    >
      <MultiCalendar.Header>
        <MultiCalendar.PrevButton />
        <MultiCalendar.Title />
        <MultiCalendar.NextButton />
      </MultiCalendar.Header>
      <MultiCalendar.Calendars />
    </MultiCalendar.Root>
  );
}

Props

numberOfMonths

Number of months to display (default: 2).

<MultiCalendar.Root numberOfMonths={3}>
  ...
</MultiCalendar.Root>

mode

Selection mode: 'single', 'range', or 'multiple'.

<MultiCalendar.Root mode="multiple">
  ...
</MultiCalendar.Root>

pagedNavigation

When true, navigation jumps by numberOfMonths instead of 1.

<MultiCalendar.Root pagedNavigation>
  ...
</MultiCalendar.Root>

showMonthTitles

Show individual month titles above each calendar grid.

<MultiCalendar.Calendars showMonthTitles />

Selection Modes

Single Selection

const [date, setDate] = useState<CalendarDate | null>(null);

<MultiCalendar.Root mode="single" value={date} onValueChange={setDate}>
  ...
</MultiCalendar.Root>

Range Selection

const [range, setRange] = useState<DateRangeValue | null>(null);

<MultiCalendar.Root mode="range" value={range} onValueChange={setRange}>
  ...
</MultiCalendar.Root>

Multiple Selection

const [dates, setDates] = useState<CalendarDate[]>([]);

<MultiCalendar.Root mode="multiple" value={dates} onValueChange={setDates}>
  ...
</MultiCalendar.Root>