Vuetify

商店

企业版

v-calendar 组件用于在每日、每周或每月视图中显示信息。每日视图有一个全天或定时元素的插槽,每周和每月视图有一个每天的插槽。您可以选择传入一个事件数组,它们将在适当的日期和时间内呈现。

日历具有类型和值,该类型和值决定在多长时间内显示何种类型的日历。这显示了最简单的配置,一个带有 name, startend 属性的事件数组。 end 是可选的,它默认为 start。如果 start定义了时间,那么它被认为是一个定时事件,并将相应地显示在日视图中。事件可以跨越数天,并将相应地呈现。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

这是一个事件日历示例,其中包含类型为 week 的全天事件和定时事件。

这是一个日历示例,每个间隔时段都有内容,类型为 day

插槽允许您定义每天的内容、每日视图的时间间隔和各种标签。

这是一个带有附加事件处理程序和控制日历显示的外部组件的计划器示例。

This is an example of an event calendar with a type of category that allows you to compare two schedules side-by-side.

This is an example of an calendar with a line for the current time.

This is an example of an event calendar where you can drag events, extend their length, and create events.

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!