Calendar month

A calendar month is built up of six calendar weeks. Each of these calendar weeks contain seven calendar dates (always representing Monday to Sunday).

nnm-calendar-date

Represents a local date. A calendar date may be empty. Emits custom event when clicked. The event contains the local date in ISO, for example 2021-10-26.

Attributes

local-date

Optional. Format YYYY-MM-DD.

out-of-valid-range

Optional. Boolean value, i.e. "true" | "false". Indicates if this calendar date is clickable/selectable or not.

selected-from-local-date

Optional. Format YYYY-MM-DD. Indicates the starting local date for a currently selected range.

selected-to-local-date

Optional. Format YYYY-MM-DD. Indicates the ending local date for a currently selected range.

Emits

local-date-clicked

Event details contains property localDate. Format YYYY-MM-DD.

Empty cell

Out of valid range (disabled)

Valid and selectable

In currently selected range

nnm-calendar-week

Attributes

monday

tuesday

wednesday

thursday

friday

saturday

sunday

Optional. Format YYYY-MM-DD. Indicates the actual local date for this day of the week. Note the lower-case for the attributes.

out-of-valid-range-days

Optional. Comma separated list of days, for example Tuesday,Friday. Note that first character is upper-case, i.e. correct English spelling. Denotes the days that are out of range and should not be enabled.

selected-from-local-date

Optional. Format YYYY-MM-DD. Indicates the starting local date for a currently selected range.

selected-to-local-date

Optional. Format YYYY-MM-DD. Indicates the ending local date for a currently selected range.

Some dates that are out of valid range

All dates in valid range and defined

Dates in currently selected range

Some date slots empty

nnm-calendar-month

Attributes

local-year-month

Required. Format YYYY-MM.

min-local-date

max-local-date

Optional. Format YYYY-MM-DD. Denotes min/max selectable local dates.

selected-from-local-date

Optional. Format YYYY-MM-DD. Indicates the starting local date for a currently selected range.

selected-to-local-date

Optional. Format YYYY-MM-DD. Indicates the ending local date for a currently selected range.

mode

Optional. Either "range" (default) or "single". If "range", you select a range of local dates. If "single", you select a single local date (see for example Local date picker).

type

Optional. Either "standalone" (default) or "embedded". If "standalone", the component manages itself. If "embedded", the component is managed by a wrapper component (see for example Local date range picker).

enable-decrease

enable-increase

Optional.

Emits

change-month-in-embedded-calendar

If type is "embedded", when clicking changing month buttons. Event details contains property action, which can contain "first-month", "previous-month", "next-month" or "last-month".

No end points

Min and max end points in same month, single mode

Min and max end points in other months, range mode (default)

Min and max end points in same month (few days), range mode (default)