🔗 Linked issue

Resolves #3764

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This example clearly demonstrates how to externally control the <UCalendar> component by directly manipulating the date passed into v-model.

The two <UButton> elements call date.subtract({ months: 1 }) and date.add({ months: 1 }) respectively. These methods operate on the CalendarDate instance wrapped in a ref, allowing reactive updates.

Since v-model="date" binds the calendar’s state to this reactive reference, any modification via the buttons is immediately reflected in the UCalendar.

This provides a straightforward and clean way to implement external navigation controls without relying on the internal calendar UI elements.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.