Display 2 months with range picker

<script setup lang="ts">
import { ref } from "vue"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar as CCalendar } from "@/components/ui/calendar"
import { CalendarDateRange as CCalendarRange } from "@/components/ui/calendar"

const year = 2026
const month = 0
const from = new Date(year, month, 6)
const to = new Date(year, month, 18)

const date = ref<CCalendarRange | undefined>({ from, to })
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <CCalendar mode="range" v-model="date" :number-of-months="2" />
    </CardContent>
  </Card>
</template>