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.

Open in new window

View RTL

<nord-calendar></nord-calendar>

<nord-calendar value="2022-01-11"></nord-calendar>

<nord-calendar value="2022-01-12"></nord-calendar>

<script>
  const calendar = document.querySelector("nord-calendar")
  calendar.isDateDisabled = function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6
  }
</script>

<nord-calendar expand></nord-calendar>

<nord-stack>
  <output></output>
  <nord-calendar value="2022-02-16"></nord-calendar>
</nord-stack>

<script>
  const calendar = document.querySelector("nord-calendar")
  const output = document.querySelector("output")

  calendar.addEventListener("nord-focus-date", e => {
    const formatted = e.date.toLocaleDateString("en", { year: "numeric", month: "long", day: "numeric" })
    output.innerText = `Focused day: ${formatted}`
  })
</script>

<nord-stack>
  <p>Highlighted dates are fully booked</p>
  <nord-calendar value="2022-01-12"></nord-calendar>
</nord-stack>

<script>
  const calendar = document.querySelector("nord-calendar")

  // as an example, highlight every sixth day
  calendar.isDateHighlighted = date => {
    return date.getDate() % 6 === 0 ? "fully booked" : false
  }
</script>

<nord-calendar style="--n-calendar-box-shadow: none"></nord-calendar>

<nord-calendar value="2021-02-14" min="2021-02-08" max="2021-02-21"></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`	`firstDayOfWeek`	Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.	`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`	`""`
`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`	`""`
`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.

Localization Guidelines

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.

Integration 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.