Get all dates in current view using Vuetify V-Calendar

Question

I'm using the Vuetify v-calendar (https://vuetifyjs.com/en/components/calendars/).

I want to dynamically generate events only for the dates that are visible on the current view. For example, on the month view for April it should return the date range as starting on the 28th and ending on the 1st, which is the visible range as seen in the image below. This works fine for Daily and Weekly views, but when I inspect the component in Monthly view the lastEnd and lastStart variables which I can access via a $ref are only the start and end of the current month (2021-04-01 & 2021-04-30)

My question is, how can I get the list of all VISIBLE dates on the calendar and not just the current month? Is it even possible?

Answer 1

I came across this issue today, if you're in the monthly view, there is a 'days' computed property on the VCalendarMonthly/Weekly component that uses some methods to calculate the start and end dates

You can access the methods via the calendar ref to get the start/end dates in view.

<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);
...