Calendar
Calendar allows user to pick a date. It comes with built-in functionality that allows you to set a minimum and a maximum allowed date. Please note that the date must be passed in ISO-8601 format.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
value | value | The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD. | string | '' |
firstDayOfWeek | first-day-of-week | Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday. | DaysOfWeek | — |
min | min | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. | string | undefined | — |
max | max | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. | string | undefined | — |
today | today | The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD. If not set, the current local date of the user is used. | string | undefined | — |
expand | expand | Controls whether the calendar expands to fill the width of its container. | boolean | false |
Methods
| Method name | Parameters | Description |
|---|---|---|
focus(options?: FocusOptions & { target: 'day' | 'month' }) => void | options: An object which controls aspects of the focusing process. | Programmatically move focus to the calendar. |
| Event | Detail Type | Description |
|---|---|---|
nord-focus-date | DateSelectEvent | Dispatched when the calendar's focused date changes. |
change | DateSelectEvent | Dispatched when a date is selected and the value changes. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-calendar-border-radius | Controls how rounded the corners are, using border radius tokens. | var(--n-border-radius) |
--n-calendar-box-shadow | Controls the surrounding shadow, using box shadow tokens. | var(--n-box-shadow-popout) |
Dependencies
This component is internally dependent on the following components:
- <nord-button>
Button
Buttons are used for interface actions. Primary style should be used only once per section for main call-to-action, while other styles can appear more frequently.
- <nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-visually-hidden>
VisuallyHidden
Visually hidden is used when an element needs to be available to assistive technologies like screen readers, but be otherwise hidden.
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use when the user needs to choose a single date or a date range.
- Close calendar after a single date is selected, unless a range with a start and end date is required.
Don’t
- Don’t use for entering date of birth. Use input component instead.
- Don’t use for choosing a date that is over 10 years in the future or the past.
Keyboard accessibility
Calendar component is built to closely follow W3C Date Picker Dialog example with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.
Month/year buttons
Space, Enter: Changes the month and/or year displayed.
Calendar grid
Space, Enter: Selects a date.Arrow up: Moves focus to the same day of the previous week.Arrow down: Moves focus to the same day of the next week.Arrow right: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.Arrow left: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.Home: Moves focus to the first day (e.g Monday) of the current week.End: Moves focus to the last day (e.g. Sunday) of the current week.Page Up: Changes the grid of dates to the previous month and sets focus on the same day of the same week.Shift + Page Up: Changes the grid of dates to the previous year and sets focus on the same day of the same week.Page Down: Changes the grid of dates to the next month and sets focus on the same day of the same week.Shift + Page Down: Changes the grid of dates to the next year and sets focus on the same day of the same week.
Integration
For integration guidelines, please see Web Components documentation .