使用 Vuetify V-Calendar 获取当前视图中的所有日期

问题描述

我正在使用 Vuetify v-calendar (https://vuetifyjs.com/en/components/calendars/)。

我只想为当前视图上可见的日期动态生成事件。例如，在四月的月视图中，它应该返回从 28 日开始到 1 日结束的日期范围，这是可见范围，如下图所示。这适用于每日和每周视图，但是当我在每月视图中检查组件时，我可以通过 lastEnd 访问的 lastStart 和 $ref 变量只是本月 (2021-04-01 & 2021-04-30)

我的问题是，如何获得日历上所有可见日期的列表，而不仅仅是当前月份？甚至有可能吗？

解决方法

我今天遇到了这个问题，如果你在月视图中，在 VCalendarMonthly/Weekly 组件上有一个 'days' 计算属性，它使用一些方法来计算开始和结束日期

您可以通过日历引用访问方法以获取开始/结束日期。

<v-calendar ref="calendar" @change="getEvents"/>

...
methods: {
  getEvents(event) { // event only has the 'current month'
    viewStart = this.$refs.calendar.getStartOfWeek(event.start);
    viewEnd = this.$refs.calendar.getEndOfWeek(event.end);
...