docs(calendar): add external controls example (#3793)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Evan Schleret
2025-04-22 15:17:17 +02:00
committed by GitHub
parent db11db6ff1
commit 13c299533f
2 changed files with 31 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
const date = shallowRef(new CalendarDate(2025, 4, 2))
</script>
<template>
<div class="flex flex-col gap-4">
<UCalendar v-model="date" :month-controls="false" :year-controls="false" />
<div class="flex justify-between gap-4">
<UButton color="neutral" variant="outline" @click="date = date.subtract({ months: 1 })">
Prev
</UButton>
<UButton color="neutral" variant="outline" @click="date = date.add({ months: 1 })">
Next
</UButton>
</div>
</div>
</template>