Calendar — Vue

---
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)} />