Multiple day selection

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

const today = new Date(2026, 0, 15)

function addDays(date: Date, days: number): Date {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days)
}

const date = ref<Date[] | undefined>([
  addDays(today, -17),
  addDays(today, 2),
  addDays(today, 6),
  addDays(today, 8),
])
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <CCalendar mode="multiple" v-model="date" :month="today" />
    </CardContent>
  </Card>
</template>