RangeCalendar

Display calendar with dates range
Import

Usage

Mo
Tu
We
Th
Fr
Sa
Su
import { useState } from 'react';
import { RangeCalendar } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState<[Date, Date]>([new Date(2021, 11, 1), new Date(2021, 11, 5)]);
return <RangeCalendar value={value} onChange={setValue} />;
}

Multiple months

Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Su
Demo is not available, increase viewport size to see it
<RangeCalendar amountOfMonths={2} />

Calendar props

RangeCalendar component uses the same props as Calendar component. The only difference is in value, onChange and amountOfMonths props shown in previous examples.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback