Calendar

Calendar is a month grid for picking a date or a range. A small script renders the days and handles the grid keyboard; the author writes only the frame.

Public web API

A group named by its heading, a header with two month buttons, and an empty grid. The script fills in the weekdays and days.

<div data-bitsy-calendar role="group" aria-labelledby="cal-heading"
     data-bitsy-calendar-value="2026-10-31" data-bitsy-calendar-min="2026-10-01">
  <div data-bitsy-calendar-header>
    <button data-bitsy-calendar-prev type="button" aria-label="Previous month">‹</button>
    <h2 data-bitsy-calendar-heading id="cal-heading" aria-live="polite"></h2>
    <button data-bitsy-calendar-next type="button" aria-label="Next month">›</button>
  </div>
  <table data-bitsy-calendar-grid role="grid" aria-labelledby="cal-heading"></table>
</div>

<script type="module">
  import { init } from "@bitsyui/bits/calendar/init";
  init();
</script>

Config attributes: -mode="range", -value, -min, -max, -unavailable, -locale, -week-start.
The script fires change with event.detail.value. Changing an attribute re-renders the grid.
Arrow keys move by day and week, Home and End by week edge, Page Up and Down by month, with Shift by year.
Pair it with a native date input on pages that must work without script.

Modes and states

Pick dates with the pointer or keyboard. Disabled days are struck through and skipped by picking.

Single, with min and unavailable days

Range, Sunday start

French locale

Foundation versus Bit

HTML has no month grid, and <input type="date"> opens a browser-drawn picker that cannot be shown inline or styled. data-bitsy-calendar renders an accessible grid, follows the locale, and exposes hooks for every color, size, and radius. Use Text Field or Selects for dates people know by heart, such as a birth date.