Range Calendar — Vue

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

<!-- 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>

<script>
  import { RangeCalendar } from '$lib/rizzo';
</script>

<RangeCalendar label="Choose date range" onRangeSelect={(start, end) => console.log(start, end)} />

<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>

import { RangeCalendar } from './components/react';

<RangeCalendar label="Choose date range" onRangeSelect={(start, end) => console.log(start, end)} />