feat(Calendar): add month/year picker modes and view switching

Author: onmax

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef<CalendarDate>()
+
+const displayValue = computed(() => {
+  if (!modelValue.value) return 'Select month'
+  const d = new Date(modelValue.value.year, modelValue.value.month - 1, 1)
+  return new Intl.DateTimeFormat('en', { month: 'short', year: 'numeric' }).format(d)
+})
+</script>
+
+<template>
+  <UPopover>
+    <UButton variant="outline" color="neutral" trailing-icon="i-lucide-calendar">
+      {{ displayValue }}
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" type="month" />
+    </template>
+  </UPopover>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef<CalendarDate>()
+
+const displayValue = computed(() => modelValue.value ? String(modelValue.value.year) : 'Select year')
+</script>
+
+<template>
+  <UPopover>
+    <UButton variant="outline" color="neutral" trailing-icon="i-lucide-calendar">
+      {{ displayValue }}
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" type="year" />
+    </template>
+  </UPopover>
+</template>

docs/content/docs/2.components/calendar.md

@@ -209,6 +209,65 @@ props:
 ---
 ::
 
+### Type
+
+Use the `type` prop to change the calendar picker type. Defaults to `date`.
+
+Set `type="month"` for a month-only picker.
+
+::component-code
+---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+  - type
+external:
+  - modelValue
+props:
+  type: month
+  modelValue: [2022, 3, 1]
+---
+::
+
+Set `type="year"` for a year-only picker.
+
+::component-code
+---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+  - type
+external:
+  - modelValue
+props:
+  type: year
+  modelValue: [2022, 1, 1]
+---
+::
+
+### Default View
+
+Use the `default-view` prop to set the initial view. Defaults to `day`.
+
+::component-code
+---
+cast:
+  defaultValue: DateValue
+ignore:
+  - defaultView
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultView: month
+  defaultValue: [2022, 2, 3]
+---
+::
+
+The heading is clickable when using `type="date"` (default) and allows switching between day, month, and year views. Selecting a month or year navigates back to the day view.
+
 ## Examples
 
 ### With chip events
@@ -275,6 +334,26 @@ name: 'calendar-external-controls-example'
 ---
 ::
 
+### As a MonthPicker
+
+Use `type="month"` with a [Popover](/docs/components/popover) to create a month picker.
+
+::component-example
+---
+name: 'calendar-month-picker-example'
+---
+::
+
+### As a YearPicker
+
+Use `type="year"` with a [Popover](/docs/components/popover) to create a year picker.
+
+::component-example
+---
+name: 'calendar-year-picker-example'
+---
+::
+
 ### As a DatePicker
 
 Use a [Button](/docs/components/button) and a [Popover](/docs/components/popover) component to create a date picker.