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