Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.
We’re hiring frontend developers! View open positions.

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.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-calendar></nord-calendar>

Properties

PropertyAttributeDescriptionTypeDefault
valuevalue

The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.

string""
firstDayOfWeekfirstDayOfWeek

Which day is considered first day of the week? 0 for Sunday, 1 for Monday, etc. Default is Monday.

DaysOfWeekundefined
minmin

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""
maxmax

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""
expandexpand

Controls whether the calendar expands to fill the width of its container.

booleanfalse
isDateDisabled

Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.

DateDisabledPredicateisDateDisabled

Events

EventDescriptionType
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 nameParametersDescription
focus(options?: FocusOptions & { target: "day" | "month" }) => voidoptions: 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.

PropertyDescriptionDefault
--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)

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.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

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.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.