Range Calendar — Vanilla

Date range selection with vanilla HTML. Same BEM as Calendar with calendar--range; script builds grid and handles range (start/end).

Range Calendar

Calendar for selecting a date range. Two clicks set start and end (order normalized). Uses calendar calendar--range and day modifiers calendar__day--range-start, calendar__day--range-end, calendar__day--in-range. JavaScript is required; listen for range-calendar-select (detail.start, detail.end as 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)

Range Calendar
—
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Markup

Use data-range-calendar, data-range-calendar-body, data-range-calendar-prev, data-range-calendar-next. Your script should populate the body and handle clicks to set start/end and dispatch range-calendar-select. See the Astro RangeCalendar component for the full logic.

html html 
<div class="calendar calendar--range" role="group" aria-label="Choose date range" data-range-calendar>
  <div class="calendar__header">
    <button type="button" class="calendar__prev" aria-label="Previous month" data-range-calendar-prev>...</button>
    <div class="calendar__month" aria-live="polite" data-range-calendar-month-label>—</div>
    <button type="button" class="calendar__next" aria-label="Next month" data-range-calendar-next>...</button>
  </div>
  <div class="calendar__grid" role="grid" data-range-calendar-grid>
    <div class="calendar__row" role="row"><!-- weekdays --></div>
    <div class="calendar__body" data-range-calendar-body role="presentation"></div>
  </div>
</div>

Other frameworks: Astro ¡ Svelte ¡ Vue ¡ React