Panoramica

The <mds-calendar-cell> web component represents a single selectable day inside the <mds-calendar> grid. It is a presentational child that renders the day number and exposes attributes the parent calendar drives to express the day’s role and its position within a selection range.

Semantic Behavior

Compound child only: It is rendered only by <mds-calendar>, which generates one cell per day of the visible month grid inside its own shadow DOM (the calendar has no default slot): consumers never write it, neither standalone nor as a child of the calendar.Parent-driven selection: The cell holds no internal selection state. The parent calendar drives the date, selection and preview attributes to paint range boundaries and intermediate days; the cell only reflects what it is given.No own events: Clicks and hover are handled by the parent (range building, preview, and the mdsCalendarChange / mdsCalendarPreselect events from <mds-calendar>). The cell itself emits nothing.Disabled state: When disabled is set the day cannot be activated; the parent applies this for days outside the calendar’s min/max range.Today marker: today is a presentational flag the parent sets on the cell matching the current date, used only for styling emphasis.

Properties & Visual Configurations

Most props are state mirrors written by the parent rather than knobs a consumer tunes directly. month: Distinguishes how the day relates to the displayed month - current for in-month days, other for leading/trailing days spilling in from adjacent months. The type also allows weekend, which the calendar never sets and which has no styling of its own: the weekend color comes from the cell’s position (the last two columns of the week).selection: Marks the cell’s position within an active range - start, end, middle, or single (a one-day or collapsed range); absence means unselected (none is styled like a selected cell, so the calendar removes the attribute instead). This is what produces the connected range visuals across adjacent cells.preview: When true, the current selection is a transient hover/preview rather than a committed selection, allowing distinct styling while the user is still choosing the second boundary.orientation: Selection-connector direction. The type allows horizontal, vertical, and both, but only horizontal is currently supported.date: The cell’s ISO YYYY-MM-DD date; the parent matches against it to compute selection state, so it is required for the cell to participate in range logic.

Dipendenze

Usa: mds-buttonUsato da: mds-calendar