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

Question

I am trying to create v-calendar with vuetify. The problem is when i use @change event it does not includes date range viewed on crud like fullcalendar. How can i get those days?

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

methot

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

I also answered this on another question, but I'll answer here too.

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 those base methods via the calendar ref to get the start/end dates in view.

Your method would then look something like this:

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