Correct and idiomatic ways to use the <mds-calendar-cell> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md. <mds-calendar-cell> is an internal subpart: its real parent <mds-calendar> renders one cell per day inside its own shadow DOM and has no default slot, so cells written as its children are never shown. Every pattern below shows the <mds-calendar> markup that puts the cells in each state.

Basic Cell Inside a Calendar

The typical form - let the parent render the cells and drive all their attributes (date in ISO YYYY-MM-DD format, label, month, selection, …).

<mds-calendar start-date="2024-06-01" end-date="2024-06-15"></mds-calendar>

Today Marker

The parent sets the today boolean attribute on the cell that matches the current date, which applies the accent-tinted styling that distinguishes today from other days. Set hide-today on the calendar to drop it.

<mds-calendar></mds-calendar>
<mds-calendar hide-today></mds-calendar>

Selection Range - Start, Middle, and End Positions

The parent sets selection to express where a cell falls inside the active range. The start and end values add rounded caps; middle fills the span between them; single applies both caps for a one-day selection.

<!-- 3 June: start, 4 June: middle, 5 June: end -->
<mds-calendar start-date="2024-06-03" end-date="2024-06-05"></mds-calendar>

Single-Day Selection

The parent uses selection="single" for the day of a single picker, for a range whose two ends are the same day, and for the start of a range still waiting for its end. This applies a fully rounded pill on both sides rather than an open-ended bar.

<mds-calendar single-picker start-date="2024-06-10"></mds-calendar>

Preview (Hover) Selection

While the user hovers toward the second boundary of a range, the parent sets preview on the cells between the start and the hovered day. The cells render distinct preview styling until the selection is committed.

<!-- range mode with a start and no end: hovering a later day previews the range -->
<mds-calendar start-date="2024-06-07"></mds-calendar>

Days from Adjacent Months

The parent renders the leading and trailing days that fill the grid but belong to the previous or next month with month="other". Inside <mds-calendar> these cells are dimmed and visible; set --mds-calendar-cell-other-month-visibility: hidden on the calendar to hide them.

<mds-calendar view-date="2024-06-01" style="--mds-calendar-cell-other-month-visibility: hidden;"></mds-calendar>

Disabled Day

The parent sets the disabled boolean attribute on days that cannot be selected - the dates outside its min/max range. A disabled cell removes pointer events and applies the disabled color (--mds-calendar-cell-disabled-color) automatically.

<mds-calendar view-date="2024-06-01" min="2024-06-10"></mds-calendar>

Styling Customization

The --mds-calendar-cell-* CSS custom properties are declared, with their defaults, on each cell inside the calendar’s shadow DOM: a value set on the <mds-calendar> host or on a parent selector does not reach them. From outside, adjust the cells through the custom properties <mds-calendar> documents for them; the colors follow the semantic roles of the theme.

.booking-calendar mds-calendar {
  --mds-calendar-cell-gap: calc(var(--spacing) * 100);
  --mds-calendar-cell-other-month-visibility: hidden;
}