Calendar

The <Calendar> is a date selection interface that allows you to choose a date using a calendar view.

Anatomy

The <Calendar> consists of a header and a grid section. Inside of the header there are two select lists, one for a month and one for a year. In the grid section there is a grid of selectable dates.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Usage

The <Calendar> should be used for experiences where you need to visualize data over an entire month. For most other scenarios, especially where compact input or flexible validation is important, consider using <DatePicker> or <DateField>.

Accessibility

Calendar cells support keyboard navigation (through arrow keys) and selection (through enter or space), with localized screen reader messages provided to announce changes in selection and the visible date range.

Localization

The <Calendar> itself supports many different calendar systems, all based on the users locale system. You can override the locale system by using the <I18nProvider> from @marigold/components. With that you can use the locale prop and set it to any language system.

Range calendar

With the minValue and maxValue property, you can set a range in which the date can be selected. This is useful if you need to limit the amout of calendar dates to select.

import { CalendarDate } from '@internationalized/date';import { Calendar } from '@marigold/components';export default () => (  <Calendar    minValue={new CalendarDate(2019, 6, 5)}    maxValue={new CalendarDate(2019, 6, 20)}  />);

Props

Calendar

Alternative components

Consider the following alternatives for selecting data tailored to different user needs and input methods.

• DatePicker: The <DatePicker> allows users to input a date directly as text, in addition to selecting one, and offers more robust validation and error messaging capabilities.
• DateField: Use the <DateField> if you need to only use text input to select a date.