VCalendar

A date field component that allows users to enter and edit date.

Component Source Primitive API Reference
S
M
T
W
T
F
S
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3

About ​

The Calendar component is built on top of VCalendar.

Installation ​

bash
npx shadcn-vue@latest add v-calendar

Usage ​

vue
<script setup lang="ts">
import { Calendar } from '@/components/ui/v-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:

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

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