CalendarReady
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.
<nord-calendar></nord-calendar>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? | DaysOfWeek | undefined |
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 | 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 | undefined |
expand | expand | Controls whether the calendar expands to fill the width of its container. | boolean | false |
isDateDisabled | – | Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends. | DatePredicate | isDateDisabled |
isDateHighlighted | – | Controls which days are highlighted with a small indicator. Returning a "falsy" value will not show an indicator. Returning "truthy" value will show the indicator, but without an accessible label. Returning a string will show the indicator, and use the string as accessible label. It is recommended to return a string rather than a truthy value whenever possible. | (date: Date) => string | boolean | isDateHighlighted |
Events
| Event | Description | Type |
|---|---|---|
nord-focus-date | Dispatched when the calendar's focused date changes. | DateSelectEvent |
change | Dispatched when a date is selected and the value changes. | DateSelectEvent |
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. |
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) |
Localization
This component requires localization in a multi-lingual application. The following keys are required when registering a translation:
| Key | Description |
|---|---|
prevMonthLabel | Accessible label for the previous month button. |
nextMonthLabel | Accessible label for the next month button. |
monthSelectLabel | Accessible label for the month select. |
yearSelectLabel | Accessible label for the year select. |
For full localization guidelines, please see Localization documentation.
Dependencies
This component is internally dependent on the following components:
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. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Troubleshooting
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.