RangeCalendar
Display calendar with dates range
Import
Source
Docs
Package
Usage
November 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<RangeCalendarwithSelect={false}nextMonthLabel="Next month" // -> aria-label for button that switches to next monthpreviousMonthLabel="Previous month" // -> aria-label for button that switches to previous month/>// When withSelect prop set to true<RangeCalendarwithSelectnextMonthLabel="Next month" // -> aria-label for button that switches to next monthpreviousMonthLabel="Previous month" // -> aria-label for button that switches to previous monthyearLabel="Select year" // -> year select aria-labelmonthLabel="Select month" // -> month select aria-label/>
Built by Vitaly Rtishchev and these awesome people