Calendar
Calendar component enables users to view and select dates.
#
Importimport Calendar from '@volue/wave-react';
#
Examples#
BasicBy default, Calendar
renders static, visual calendar. It does not include any logic of dates selection.
It may be useful when you want to display data with in calendar view but do not want it to be interactive.
Calendar
component is built on top of React Day Picker.
Majority of the React Day Picker API is available to influence the calendar appearance and behaviour.
#
Single selectionYou can use Calendar
component as a base to create custom date selection experience if Date Picker component does not meet your requirements.
To enable single day selection, set mode
property to single
. Also, it usually makes sense to make Calendar
component controlled using selected
and onSelect
props.
#
Range selectionSet mode
to range
to allow the selection of multiple days.
#
Min/max dateYou can set minimum and/or maximum dates to limit users to choose from a specific period in time.
Use from...
and to...
props to control time frames.
#
Caption layoutCalendar
can be used with 3 different layouts of navigation:
-
buttons
: display buttons for moving forward/backward through months (default). -
dropdown
: display select dropdowns for choosing the month and the year. -
dropdown-buttons
: display both.
The dropdown
and dropdown-buttons
layouts are available only when from...
and to...
props are set.
dropdown-buttons
is typically recommended as it lets the user easily find the time period they want to choose from without having to click through months.
#
SizesCalendar component comes in two sizes: medium
and small
. By default, it uses medium
size.
#
Disabled stateAmong other modifiers that React Day Picker provides, it's convinient to disable specific days in the calendar.
In addition, you can turn off the navigation using disableNavigation
prop.
#
LocaleTo change the locale, pass to the locale
prop a date-fns locale object.
For example, to localize the calendar in German, import the locale object from date-fns and pass it to the component.
import { de } from 'date-fns/locale';// import { enGB, nb, ... } from 'date-fns/locale';
#
Inside popoverUsually Calendar
component is placed in a wrapping component such as Card or Popover.
Date Picker component is built using a composition of the Popover
and Calendar
components.
#
Accessibility features-
Calendar
provides deep keyboard interactions. -
Necessary ARIA roles and attributes are provided to give directions to a screen reader user.
#
API ReferenceThe props below show a commonly used subset of React DayPicker API.
Prop | Type | Default |
---|---|---|
mode | enum | No default value |
size | enum | "medium" |
captionLayout | enum | "buttons" |
selected | Matcher | Matcher[] | No default value |
onSelect | enum | No default value |
className | string | No default value |
defaultMonth | Date | No default value |
fromDate | Date | No default value |
fromMonth | Date | No default value |
fromYear | number | No default value |
toDate | Date | No default value |
toMonth | Date | No default value |
toYear | number | No default value |
disabled | Matcher | Matcher[] | No default value |
modifiers | DayModifiers | No default value |
disableNavigation | boolean | No default value |
locale | Locale | No default value |
footer | React.ReactNode | No default value |
labels | Partial<Labels> | No default value |
showOutsideDays | boolean | true |
today | Date | No default value |