Calendar Updated

Usage

Calendar shows a month grid that people can navigate and pick a date from. It has built-in support for setting a minimum and maximum allowed date. Like Date Picker, dates are handled in ISO-8601 format (YYYY-MM-DD).

import "@nordhealth/components/lib/Calendar"

Render a standalone calendar, optionally with an initial value:

Examples

Basic

With no attributes the calendar opens on the current month.

Minimum and maximum

Constrain the selectable range with min and max. Both take ISO-8601 dates and can be used together or on their own.

Range selection

Set range to select a start and end date instead of a single day. The first click sets the start, the second sets the end (the two are swapped if the second is earlier), and the days in between are highlighted with a live preview as you hover. Control or read the selection with range-start and range-end (both ISO-8601), and listen for the range-change event, which fires once a complete range is picked.

Multiple months New since Jul 6, 2026

Set months to show that many consecutive months side by side, starting from the focused month. Combined with range, a selection (and its hover preview) spans every visible month, and the navigation arrows slide the whole window — handy for picking a span that crosses months without paging. Rendered this way, Calendar is itself an inline range picker.

For a complete range-picking control — with presets, the two-month calendar in a popout and Apply/Cancel — use Date Range Picker, which composes Calendar in this mode.

Expanded

Set expand to make the calendar fill the inline size of its container.

Small

The size attribute accepts s and m (default).

Inline

Remove the calendar's drop shadow to embed it flush in the page rather than as a floating surface.

Change today

Override which date is treated as "today" with the today attribute, useful for testing or when the client clock can't be trusted.

Disabling days

Set the isDateDisabled property to a function that returns true for dates that can't be selected — here weekends are disallowed.

Highlighting days

Set the isDateHighlighted property to mark notable dates; return a string to give the highlight an accessible label.

Focus date event

Calendar fires a nord-focus-date event as the focused day changes during keyboard navigation, letting you react to the day a user is hovering before they commit to it.

RTL

Calendar follows the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

• Calendar manages keyboard navigation between days, so users can move through the grid and select a date with the keyboard alone.
• Supply value, min, max and today in ISO-8601 format (YYYY-MM-DD) so the selected, bounded and current dates stay consistent for assistive technology.
• Calendar is a date-selection control without its own label; when embedding it in a form, pair it with a Field and Field Label to give it an accessible name.
• Listen for the change event to react to a date selection rather than polling the value.