Calendar — Vanilla

Calendar with vanilla HTML. Use the same BEM structure; the grid is built by script (see Astro Calendar component for reference).

Calendar

Month grid for choosing a date. Structure uses calendar, calendar__header, calendar__month, calendar__grid, calendar__row, calendar__weekday, and calendar__day. JavaScript is required to build the month grid and handle prev/next and selection. Listen for calendar-select for the chosen date (YYYY-MM-DD).

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Live example (Astro component; same BEM)

Calendar
—
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Markup

Use the same HTML shell. Your script should populate data-calendar-body with rows and day buttons, and handle data-calendar-prev / data-calendar-next and day clicks. See the Astro Calendar component script for the full logic.

html html 
<div class="calendar" role="group" aria-label="Calendar" data-calendar data-initial-month data-selected>
  <div class="calendar__header">
    <button type="button" class="calendar__prev" aria-label="Previous month" data-calendar-prev>...</button>
    <div class="calendar__month" aria-live="polite" data-calendar-month-label>—</div>
    <button type="button" class="calendar__next" aria-label="Next month" data-calendar-next>...</button>
  </div>
  <div class="calendar__grid" role="grid" aria-label="Month" data-calendar-grid>
    <div class="calendar__row" role="row">
      <div class="calendar__weekday" role="columnheader">Sun</div>
      <!-- Mon–Sat -->
    </div>
    <div class="calendar__body" data-calendar-body role="presentation"></div>
  </div>
</div>