Calendar with pricing

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

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

function getPriceForDate(d: Date): number {
  const seed = d.getFullYear() * 10000 + (d.getMonth() + 1) * 100 + d.getDate()
  const val = (seed * 9301 + 49297) % 233280
  return Math.floor(50 + (val / 233280) * 200)
}
</script>

<template>
  <CCalendar mode="single" v-model="date" class="rounded-lg border [--cell-size:--spacing(12)]">
    <template #dayContent="{ dayValue, outsideView, date: dayDate }">
      {{ dayValue }}
      <span v-if="!outsideView" :class="getPriceForDate(dayDate) < 100 ? 'text-green-600 dark:text-green-400' : ''">
        {{ `$${getPriceForDate(dayDate)}` }}
      </span>
    </template>
  </CCalendar>
</template>