extended-45

1<script setup lang="ts">
2import {
3  MiniCalendar,
4  MiniCalendarDay,
5  MiniCalendarDays,
6  MiniCalendarNavigation,
7} from "@/registry/default/ui/mini-calendar";
8import { CalendarDate } from "@internationalized/date";
9import { ref } from "vue";
10 
11const selectedDate = ref<CalendarDate>();
12</script>
13 
14<template>
15  <div class="flex items-center justify-center">
16    <MiniCalendar v-model="selectedDate" :days="3">
17      <MiniCalendarNavigation direction="prev" />
18      <MiniCalendarDays v-slot="{ date }">
19        <MiniCalendarDay :date="date" />
20      </MiniCalendarDays>
21      <MiniCalendarNavigation direction="next" />
22    </MiniCalendar>
23  </div>
24  <p class="text-muted-foreground mt-2 text-xs">Compact 3-day view for mobile or tight spaces</p>
25</template>