Calendar
A native web component that renders a monthly calendar with a month/year header, previous/next month navigation buttons, a localized weekday row, and a 7-column grid. Selecting a day (click or Enter/Space) updates the value attribute and fires the change event; the arrow keys move focus between days, crossing months at the edges. Use it when you need an inline, accessible date picker with no dependencies.
Preview
<pura-calendar value="2026-05-29" month="2026-05"></pura-calendar>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | "" | Selected day in yyyy-mm-dd format; reflects the user's selection. |
month | string | current month (yyyy-mm) | Displayed month in yyyy-mm format; defaults to the current month. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/calendar.js"></script>import "./pura/lib/calendar.js";