shadcn-vue/apps/www/src/content/docs/components/calendar.md

title	description	source	primitive
Calendar	A date field component that allows users to enter and edit date.	apps/www/src/lib/registry/default/ui/calendar	https://vcalendar.io/

About

The Calendar component is built on top of VCalendar.

Installation

npx shadcn-vue@latest add calendar

<template #Manual>

Install the following dependency

npm install v-calendar

Copy and paste the following code into your project

<<< @/lib/registry/default/ui/calendar/Calendar.vue

Usage

<script setup lang="ts">
import { Calendar } from '@/components/ui/calendar'
</script>

<template>
  <Calendar />
</template>

The API is essentially the same, i.e. props and slots. See the VCalendar documentation for more information.

Slots

The slots available are those currently supported by VCalendar, namely :

• day-content
• day-popover
• dp-footer
• footer
• header-title-wrapper
• header-title
• header-prev-button
• header-next-button
• nav
• nav-prev-button
• nav-next-button
• page
• time-header

Example using the day-content slot:

<script setup lang="ts">
import { Calendar } from '@/components/ui/calendar'
</script>

<template>
  <Calendar>
    <template #day-content="{ day, dayProps, dayEvents }">
      <div v-bind="dayProps" v-on="dayEvents">
        {{ day.label }}
      </div>
    </template>
  </Calendar>
</template>