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 from... and to... props to control time frames.

Caption layout#

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

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 turn off the navigation using disableNavigation 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';

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#