Vuetify v-calendar @change start end and days 不包括过去或下个月的天数

Question

我正在尝试使用 vuetify 创建 v-calendar。问题是当我使用@change 事件时，它不包括像 fullcalendar 这样在 crud 上查看的日期范围。我怎样才能得到那些日子？

<v-calendar
 ref="calendar"
 v-model="focus" 
 :events="events" 
 @change="updateRange"
></v-calendar>

方法

updateRange ({ start, end }) {
    // start.date and end.date gives first/end day of the month instate of range of crud
    this.events = this.getEvents(start.date, end.date)
)}

Answer 1

我在另一个问题上也回答过这个问题，但我也会在这里回答。

如果您在每月视图中，VCalendarMonthly/Weekly 组件上有一个 'days' 计算属性，它使用一些方法来计算开始和结束日期。

您可以通过日历引用访问这些基本方法以查看 start/end 日期。

您的方法将如下所示：

updateRange ({ start, end }) {
    viewStart = this.$refs.calendar.getStartOfWeek(start);
    viewEnd = this.$refs.calendar.getEndOfWeek(end);
    
    this.events = this.getEvents(viewStart.date, viewEnd.date);
)}

Vuetify v-calendar @change start end and days 不包括过去或下个月的天数

Vuetify v-calendar @change start end and days not includes past or next month days

vcalendar

vuetify.js