Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

disableMonthYearSelectiondisableMonthYearSelectionbooleanDisables switching to month or year selection views from the calendar header.

hideNextButtonhideNextButtonbooleanIf set, the component hides the next navigation button in the calendar header.

hidePreselectionhidePreselectionbooleanIf set, the component hides the preselection area above the calendar view even when the preselection slot has content.

hidePreviousButtonhidePreviousButtonbooleanIf set, the component hides the previous navigation button in the calendar header.

hideTodayhideTodaybooleanHides the highlight on today's date in the calendar view.

singlePickersinglePickerbooleanIf set, the component selects a single date instead of a date range (start and end date).

endDatestringSpecifies the end date of the selection

hoverDatestringSpecifies the date used to preview the range selection across multiple visible calendars.

maxstringSpecifies the minimum date of the selection

minstringSpecifies the minimum date of the selection

startDatestringSpecifies the start date of the selection

viewDatestringSpecifies the date used to determine the visible month without changing the selection.

Panoramica

The <mds-calendar> web component is the date-selection surface of the Magma Design System: a localized month grid that lets users pick either a single day or a date range. It is the visual engine behind mds-input-date and mds-input-date-range.

Semantic Behavior

Range vs. single mode: range selection is the default; set singlePicker to pick one day. In range mode the first click sets the start, the second sets the end, and a third click starts a new range from the clicked day; in single mode each click replaces the prior choice.Range auto-ordering: If the second click lands before the current start, the two endpoints are swapped so startDate always precedes endDate; an endDate set earlier than startDate is not reordered: changed after load, it only logs a console warning.Hover preview: While a range start is set, hovering over cells previews the candidate range live (range mode only).Min/max bounds: min and max mark out-of-range day cells as disabled, blocking their selection.Multi-view navigation: The header toggles between the day grid, a month picker, and a year picker; the year view pages in decades while the calendar view pages month by month. The two arrows are icon-only buttons named in the page language (the lang of <html>): previous / next month on the day grid, previous / next years in the year view; the month picker has nothing to page through, so there they are disabled.Localization: Weekday names, month names, and cell titles are formatted in the page language (the lang attribute of <html>, en when absent).Emitted events: mdsCalendarChange fires on every pick with { startDate, endDate? }: in range mode the first click emits { startDate } alone, the second the full range; mdsCalendarPreselect fires only with a completed range, to let preselection shortcuts re-evaluate their state.Preselection slot: A preselection named slot hosts quick-pick shortcuts. The area appears only if, when the calendar loads, the host contains an element with the class date-preselection--has-preselection; hidePreselection collapses it.

Properties & Visual Configurations

Dates are exchanged as ISO 8601 strings (YYYY-MM-DD). startDate and endDate seed the selection (a click updates the internal selection and emits mdsCalendarChange, it does not rewrite the attributes); on load, a valid startDate also determines which month is shown first. singlePicker is the mode switch: omit it for two-ended range selection, set it for single-day pickers. When set, any endDate is ignored and cleared with a warning.hidePreviousButton / hideNextButton remove one of the header navigation buttons, typically on calendars paired side by side; disableMonthYearSelection keeps the header on the day grid; hideToday removes the highlight on today’s date.Every boolean prop defaults to false: the feature is on until the bare attribute turns it off.min / max define the selectable window; days outside it render disabled rather than being hidden. This component does not use the shared variant / tone ladders on its host - those are defined in agents/variants.md and are applied internally to the navigation buttons it renders.

Dipendenze

Usa: mds-button, mds-calendar-cellUsato da: mds-input-date, mds-input-date-range