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

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CalendarDate } from '@internationalized/date'
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+
+const modelValue = shallowRef<CalendarDate>()
+const formatter = new DateFormatter('en-US', {
+  month: 'long',
+  year: 'numeric'
+})
+
+const label = computed(() => {
+  if (!modelValue.value) {
+    return 'Select month'
+  }
+
+  return formatter.format(modelValue.value.toDate(getLocalTimeZone()))
+})
+</script>
+
+<template>
+  <UPopover>
+    <UButton variant="outline" color="neutral" trailing-icon="i-lucide-calendar">
+      {{ label }}
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" type="month" />
+    </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` when `type="date"`.
+
+::component-code
+---
+cast:
+  defaultValue: DateValue
+ignore:
+  - defaultView
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultView: month
+  defaultValue: [2022, 2, 3]
+---
+::
+
+When using `type="date"`, the heading buttons let users switch between day, month, and year views.
+
 ## Examples
 
 ### With chip events
@@ -275,6 +334,16 @@ name: 'calendar-external-controls-example'
 ---
 ::
 
+### As a month picker
+
+Use `type="month"` with a [Popover](/docs/components/popover) to create a month picker.
+
+::component-example
+---
+name: 'calendar-month-picker-example'
+---
+::
+
 ### As a date picker
 
 Use a [Button](/docs/components/button) and a [Popover](/docs/components/popover) component to create a date picker.