How to control Calendar outside the component

[mydnic]

Description

I'm using UCalendar in my project, and I'd like to be able to trigger the previousMonth and nextMonth buttons, but with my own buttons, outside the component.

Something like this

<button @click="customPrevMonth">previous</button>
<button @click="customNextMonth">next</button>

<UCalendar ref="customCalendar" />

I tried to check this.$refs.customCalendar if I could find any exposed method, but got nothing.

Do you know how and if this is feasible ?

[EvanSchleret]

It's just a workaround but you could do that by subtracting or adding a month to the date passed to the calendar.

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const date = ref(new CalendarDate(2025, 4, 2))
</script>

<template>
    <UButton @click="() => date = date.subtract({ months: 1 })">
        previous
    </UButton>

    <UButton @click="() => date = date.add({ months: 1 })">
        next
    </UButton>

    <UCalendar v-model="date" />
</template>

[mydnic]

That works ! thanks a lot :)

Might be a good idea to document it. I though the model-value was only for selected dates

[EvanSchleret]

I'll propose something in a PR later. Glad that is solves your issue :)