S

M

T

W

T

F

S

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

1

2

3

4

5

关于

Calendar 组件建立在 VCalendar 之上。

安装

npx shadcn-vue@latest add v-calendar

用法

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

<template>
  <Calendar />
</template>

API 本质上是相同的，即道具和插槽。有关更多信息，请参阅 VCalendar 文档。

插槽

可用的插槽是 VCalendar 当前支持的 插槽，即

• 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

使用 day-content 插槽的示例

<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>