material-calendar — @viewflow/material

Default — current month, no selection

Today's date carries a primary-color outline. Click any day to select. Click the month or year label in the header to swap into month / year picker views.

Pre-selected value + min/max bounds

Locked to a 30-day window around 2026-05-15. Days outside the window are dimmed and non-interactive; the prev/next arrows disable when stepping out of range.

Dense — tight day rows

Add the dense attribute to compress the day grid rows to their natural 40dp height instead of stretching to fill 456dp. Useful when embedding inline in a denser surface.

Locale override (Intl path)

Set locale to render month/weekday names and first-day-of-week from the chosen locale. Try the picker — the calendar updates without a reload.

Locale

Last selection

(none)

Sample usage

<material-calendar
  value="2026-05-15"
  min="2026-01-01"
  max="2026-12-31"
  locale="de-DE"
></material-calendar>

<script>
  document.querySelector('material-calendar')
    .addEventListener('dateSelect', e => console.log(e.detail.value));
</script>