calendar

Today button

Today button

Загрузка превью…

src/calendar/c-calendar-12.vue

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

const today = new Date(2026, 0, 15)
const selectedDay = new Date(2025, 11, 18) // today - 28 days

const month = ref<Date>(selectedDay)
const date = ref<Date | undefined>(selectedDay)

function setToday() {
  date.value = today
  month.value = today
}
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <CCalendar mode="single" v-model="date" :month="month" @update:month="month = $event" />
      <Button class="mb-2 ml-4" size="sm" variant="outline" @click="setToday">Current today</Button>
    </CardContent>
  </Card>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-calendar-12.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)