Calendar with presets

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

const fixedToday = new Date(2026, 0, 15)
const date = ref<Date | undefined>(new Date(2026, 1, 12))
const currentMonth = ref<Date>(new Date(2026, 0, 1))

const presets = [
  { label: "Today", value: 0 },
  { label: "Tomorrow", value: 1 },
  { label: "3 days", value: 3 },
  { label: "Week", value: 7 },
  { label: "2 weeks", value: 14 },
]

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

function pick(value: number) {
  const newDate = addDays(fixedToday, value)
  date.value = newDate
  currentMonth.value = new Date(newDate.getFullYear(), newDate.getMonth(), 1)
}
</script>

<template>
  <Card class="mx-auto w-fit max-w-[300px]" size="sm">
    <CardContent>
      <CCalendar
        mode="single"
        v-model="date"
        :month="currentMonth"
        @update:month="currentMonth = $event"
        fixed-weeks
        class="p-0 [--cell-size:--spacing(9.5)]"
      />
    </CardContent>
    <CardFooter class="flex flex-wrap gap-2 border-t">
      <Button v-for="preset in presets" :key="preset.value" variant="outline" size="sm" class="flex-1" @click="pick(preset.value)">
        {{ preset.label }}
      </Button>
    </CardFooter>
  </Card>
</template>