From 13c299533fcdb1b9251a393b3d3677e143c0a694 Mon Sep 17 00:00:00 2001
From: Evan Schleret <55502199+EvanSchleret@users.noreply.github.com>
Date: Tue, 22 Apr 2025 15:17:17 +0200
Subject: [PATCH] docs(calendar): add external controls example (#3793)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../CalendarExternalControlsExample.vue       | 21 +++++++++++++++++++
 docs/content/3.components/calendar.md         | 10 +++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 docs/app/components/content/examples/calendar/CalendarExternalControlsExample.vue

diff --git a/docs/app/components/content/examples/calendar/CalendarExternalControlsExample.vue b/docs/app/components/content/examples/calendar/CalendarExternalControlsExample.vue
new file mode 100644
index 00000000..3a2df59c
--- /dev/null
+++ b/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>
diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md
index 0cd8676d..7e1b6cdb 100644
--- a/docs/content/3.components/calendar.md
+++ b/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.