Calendar

Component for displaying and selecting date .

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

A <Calendar> consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date.

Import

import { Calendar } from '@marigold/components';

Appearance

Sorry! There are currently no variants and sizes available.

Props

PropertyTypeDefaultDescription
valueDateValuenoneThe current calendar value.
defaultValueDateValuenoneThe default value of calendar.
focusedValueDateValuenoneControls the currently focused date within the calendar.
maxValueDateValuenoneThe maximum allowed date that a user may select.
minValueDateValuenoneThe minimum allowed date that a user may select.
validationStateValidationState `valid | invalid`noneWhether the current selection is valid or invalid according to application logic.
onChangefunctionnonea callback function that is called when the the date field value changes.
disabledbooleanfalseDisables the Calendar.
readOnlybooleanfalseWhether the calendar value is immutable.
autoFocusbooleanfalseWhether to automatically focus the calendar when it mounts.

Examples

Simple Calendar

In this example you can see a simple <Calendar> component and you can select the date.

May 2024

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Disabled Calendar

In this example the <Calendar> has its prop disabled. So you can't interact with the <Calendar>.

May 2024

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Determine the max and min value for Calendar

You can set the range for <Calendar> by setting minValue and maxValue properties

June 2019

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6