K

RangeCalendar

Display calendar with dates range
Import

Usage

July 2021
Mo
Tu
We
Th
Fr
Sa
Su
import { useState } from 'react';
import dayjs from 'dayjs';
import { RangeCalendar } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState<[Date, Date]>([
dayjs(new Date()).startOf('month').toDate(),
dayjs(new Date()).startOf('month').add(4, 'days').toDate(),
]);
return <RangeCalendar value={value} onChange={setValue} month={new Date()} />;
}

Calendar props

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

Accessibility and usability

To make all component controls visible to screen reader set following props:

// When withSelect prop set to false
<RangeCalendar
withSelect={false}
nextMonthLabel="Next month" // -> aria-label for button that switches to next month
previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
/>
// When withSelect prop set to true
<RangeCalendar
withSelect
nextMonthLabel="Next month" // -> aria-label for button that switches to next month
previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
yearLabel="Select year" // -> year select aria-label
monthLabel="Select month" // -> month select aria-label
/>
Build fully functional accessible web applications with ease
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