121
GitHub
Documentation
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 in context

Preview

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
02

Copy a working example

Usage

Astro examples assume UIPrimitives is mounted once in your root layout. Do not add the runtime next to each component instance.

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>
---
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>
03

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.

July 2026
MonTueWedThuFriSatSun
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
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>
---
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>

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.