Date range selection calendar. Two clicks set start and end; fires range-calendar-select with start and end (YYYY-MM-DD).
Range Calendar Component
A calendar for selecting a date range. Click once to set the start date, then click again to set the end date (order is normalized so start ⤠end). Uses the same BEM structure as Calendar with calendar--range and range state modifiers. Fires range-calendar-select when both dates are set.
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
bashbash
npx rizzo-css add
bashbash
pnpm dlx rizzo-css add
bashbash
npx rizzo-css add
bashbash
bunx rizzo-css add
Props
id (string, optional) â Unique id (auto-generated if omitted)
initialMonth (string, optional) â Initial month as YYYY-MM
rangeStart (string, optional) â Initial range start as YYYY-MM-DD
rangeEnd (string, optional) â Initial range end as YYYY-MM-DD
label (string, optional) â Accessible label (default: "Choose date range")
class (string, optional) â Additional CSS classes
Events
Listen for range-calendar-select on the calendar element. event.detail has start and end (YYYY-MM-DD).
Live Example
Range Calendar
â
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tabâboth stay in sync.
Astro Vanilla Svelte Vue React
astroastro
---
import RangeCalendar from '../components/astro/RangeCalendar.astro';
---
<RangeCalendar label="Choose date range" client:load />
<!-- Listen for range-calendar-select: event.detail.start, event.detail.end (YYYY-MM-DD) -->
htmlhtml
<!-- Rizzo CSS. Range calendar: two clicks set start/end; listen for range-calendar-select (see /docs/vanilla/components/range-calendar). -->
<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>
sveltesvelte
<script>
import { RangeCalendar } from '$lib/rizzo';
</script>
<RangeCalendar label="Choose date range" onRangeSelect={(start, end) => console.log(start, end)} />
vuevue
<script setup>
import RangeCalendar from '@/components/rizzo/RangeCalendar.vue';
</script>
<template>
<RangeCalendar label="Choose date range" @range-select="({ start, end }) => console.log(start, end)" />
</template>
tsxtsx
import { RangeCalendar } from './components/react';
<RangeCalendar label="Choose date range" onRangeSelect={(start, end) => console.log(start, end)} />
npm 
pnpm 
yarn 
bun