<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { CalendarDate } from '@internationalized/date'
    const value = shallowRef(new CalendarDate(2022, 2, 3))
</script>

<template>
    <div class="max-w-130 border p-4 rounded-lg">
        <div class="border p-2 text-center">Current selected date: <br> {{ value }}</div> <br>
        <UCalendar v-model="value" />
        <br>
        <i>(*example with dynamic data)</i>
    </div>
</template>