Disabled dates

<script setup lang="ts">
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 rangeA = { from: addDays(today, 14), to: addDays(today, 16) }
const rangeB = { from: addDays(today, 23), to: addDays(today, 24) }

function isDisabled(date: Date): boolean {
  const day = date.getDay()
  return (
    date < today ||
    date.getTime() === today.getTime() ||
    day === 0 ||
    day === 6 ||
    (date >= rangeA.from && date <= rangeA.to) ||
    (date >= rangeB.from && date <= rangeB.to)
  )
}
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <CCalendar mode="range" :month="today" :disabled-fn="isDisabled" />
    </CardContent>
  </Card>
</template>