Calendar
Month grid for date display or date picker; prev/next month, keyboard and screen reader accessible
Same BEM classes and behavior as Astro, Svelte, and React.
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.
Live examples
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 ---
import Calendar from '../components/astro/Calendar.astro';
---
<Calendar label="Choose a date" />
<!-- Rizzo CSS. Calendar grid is built by script (see /docs/vanilla/components/calendar). -->
<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>
<script>
import { Calendar } from '$lib/rizzo';
</script>
<Calendar label="Choose a date" onSelect={(date) => console.log(date)} />
<script setup>
import Calendar from '@/components/rizzo/Calendar.vue';
</script>
<template>
<Calendar label="Choose a date" @select="(date) => console.log(date)" />
</template>
import { Calendar } from './components/react';
<Calendar label="Choose a date" onSelect={(date) => console.log(date)} />
Other frameworks: Astro · Vanilla · Svelte · React