Calendar

Import#

import Calendar from '@volue/wave-react';

Examples#

Basic#

By 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.

Single selection#

You 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 selection#

Set mode to range to allow the selection of multiple days.

Min/max date#

You can set minimum and/or maximum dates to limit users to choose from a specific period in time.

Use startMonth and endMonth props to control time frames.

Caption layout#

By default Calendar can be navigated using buttons for moving forward/backward through months. To enable select dropdowns for choosing the month and the year, use captionLayout="dropdown" prop.

The following layouts of the month caption are available:

• ​
  label: displays the month and year as a label (default).
• ​
  dropdown: displays dropdowns for choosing the month and the year.
• ​
  dropdown-months: displays a dropdown with the months only.
• ​
  dropdown-years: displays a dropdown with the years only.

Sizes#

Calendar component comes in two sizes: medium and small. By default, it uses medium size.

Disabled state#

Among other modifiers that React Day Picker provides​, it's convinient to disable specific days in the calendar. In addition, you can disable the navigation using disableNavigation prop or hide it alltogether using hideNavigation prop.

Locale#

To 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';

Time zone#

To change the time zone, pass IANA time zone​ identifier or a UTC offset to timeZone prop.

import { TZDate } from '@date-fns/tz';

Inside popover#

Usually Calendar component is placed in a wrapping component such as Card or Popover.

Accessibility features#

• ​

  Calendar provides deep keyboard interactions​.

• ​

  Necessary ARIA roles and attributes are provided to give directions to a screen reader user.

API Reference#