Skip to main content
161

Search Lumen

Find components, APIs, guides, and recipes.

Type at least two characters to search.

GitHub
Web docs
FormsGlass surface

Calendar

Presents a calendar surface for date selection.

View previewAPI referenceView in Figma

FrameworksAstro · React · Elements

Registry commandlumen add Calendar

InteractionEnhanced runtime

01

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

AstroSame visual contract, native framework API
July 2026
MonTueWedThuFriSatSun
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
July 2026
MonTueWedThuFriSatSun
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
July 2026
MonTueWedThuFriSatSun
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
July 2026
MonTueWedThuFriSatSun
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.
astro
---
import {
  Calendar,
  Field,
  Label
} from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 1rem; max-width: 42rem;">
  <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));">
    <Field>
      <Label id="ex-calendar-basic-label">Project month</Label>
      <Calendar aria-labelledby="ex-calendar-basic-label" month="2026-07" />
    </Field>

    <Field>
      <Label id="ex-calendar-selected-label">Selected milestone</Label>
      <Calendar aria-labelledby="ex-calendar-selected-label" value="2026-07-14" />
    </Field>
  </div>

  <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));">
    <Field>
      <Label id="ex-calendar-bounds-label">Booking window</Label>
      <Calendar
        aria-labelledby="ex-calendar-bounds-label"
        max="2026-07-24"
        min="2026-07-08"
        month="2026-07"
      />
    </Field>

    <form style="display: grid; gap: 0.75rem;">
      <Field>
        <Label id="ex-calendar-form-label">Delivery date</Label>
        <Calendar
          aria-labelledby="ex-calendar-form-label"
          max="2026-08-31"
          min="2026-07-01"
          month="2026-07"
          name="deliveryDate"
          value="2026-07-20"
        />
      </Field>
      <button class="ui-button ui-button--default ui-button--default-size" type="submit">Save date</button>
    </form>
  </div>
</div>
Edit Calendar in browser
02

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

bash@santi020k/lumen-astro
pnpm add @santi020k/lumen-astro
pnpm add @santi020k/lumen-astro
bashAstro wrapper
lumen add Calendar
lumen add Calendar

Glass

Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.

AstroSame visual contract, native framework API
September 2026
MonTueWedThuFriSatSun
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.
astro
---
import { Calendar } from '@santi020k/lumen-astro'
---

<div class="docs-glass-demo">
  <Calendar aria-label="July 2026" glass>
    <strong>July 2026</strong>
    <table>
      <thead>
        <tr><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th><th>Su</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
        <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
        <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
      </tbody>
    </table>
  </Calendar>
</div>
Edit Calendar in browser

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

AttributeValuesDefaultDescription
glassboolean | "subtle" | "strong"falseApplies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity.
disabledbooleanfalseDisables month navigation, date selection, and the hidden form input.
maxYYYY-MM-DD string-Disables dates after the inclusive maximum date.
minYYYY-MM-DD string-Disables dates before the inclusive minimum date.
monthYYYY-MM stringcurrent or selected monthSets the initially visible month.
namestring-Sets the name of the hidden input that stores the selected ISO date.
valueYYYY-MM-DD string""Sets the selected date and hidden input value.
class, classNamestring""Merges custom classes with the generated ui-* root classes.
...native attributesHTML attributes-Forwards standard attributes to the root element unless the component consumes them.

Keyboard interactions

Keyboard behavior provided by the Astro UIPrimitives runtime for this component.

KeyAction
Enter, Space on a daySelect the focused day, update the hidden input, and dispatch native input and change events from that input.
ArrowRight, ArrowLeftMove day focus by one day.
ArrowDown, ArrowUpMove day focus by one week.
Home, EndMove focus to the first or last day in the current week row.
PageDown, PageUpMove focus to the same date in the next or previous month.
Web docsFull catalog