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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/components/content/examples/calendar/CalendarExternalControlsExample.vue

@@ -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>

docs/content/3.components/calendar.md

@@ -223,6 +223,16 @@ name: 'calendar-other-system-example'
 You can check all the available calendars on `@internationalized/date` docs.
 ::
 
+### With external controls
+
+You can control the calendar with external controls by manipulating the date passed in the `v-model`.
+
+::component-example
+---
+name: 'calendar-external-controls-example'
+---
+::
+
 ### As a DatePicker
 
 Use a [Button](/components/button) and a [Popover](/components/popover) component to create a date picker.