docs(Calendar): add "With external controls" example #3793
+31
β0
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
π Linked issue
#3764
β Type of change
π Description
This example clearly demonstrates how to externally control the
<UCalendar>
component by directly manipulating thedate
passed intov-model
.The two
<UButton>
elements calldate.subtract({ months: 1 })
anddate.add({ months: 1 })
respectively. These methods operate on theCalendarDate
instance wrapped in aref
, 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