CalendarElementMixin

Adds locale-sensitive date support

Overview

Purpose: adds locale-dependent date support to an element, typically for

This mixin works in the middle of the Elix render pipeline:

events → methodssetState → updates → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • date property for the date that should be shown by the element.
  • locale property for the language and region that should be used by the element.

Usage

import CalendarElementMixin from 'elix/src/CalendarElementMixin.js';
class MyElement extends CalendarElementMixin(HTMLElement) {}

Example

Demo: CalendarElementMixin handles the date and locale of this CalendarMonth

API

Used by classes CalendarDay, CalendarMonth, CalendarMonthDays, CalendarMonthYearHeader, and CalendarWeek.

date property

The date that should be shown by the element. For elements that show a range of dates (a month, a week, etc.), the referenced date will be included in the range.

This property can be set as a string, which will be parsed and converted to a JavaScript Date.

If not specified, the default date value is the current date.

Type: Date|string

locale property

A string that identifies a language and a region using a BCP 47 language tag. This is the same format used by to identify a locale in the standard Intl internationalization API. See the locales argument documentation for details.

Calendar elements are region-sensitive, so language alone is insufficient. Accordingly, the locale should identify at least a language and a region. Examples: "en-US" identifies US English, while "en-GB" identifies English in Great Britain. The use of "en" on its own would be insufficient.

Type: string