4

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)

enter image description here

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?

user931018
  • 643
  • 1
  • 10
  • 24
  • Do you mean that you would want to also see events from 2021-03-28 - 2021-03-31 as seen int he picture and 2021-05-01? I mean, those are not visible? – AT82 Apr 22 '21 at 07:53
  • Correct. I only want to pull entries for the range of dates visible on the Calendar, not just the month it's showing (April in this case). If you have an entry that occurs on say March 29th, then it will still show if I pull all entries without a range. So if I want to pull all the entries for a range (the current visible dates) I will need to know all the dates visible, but at the moment I can only directly access the first and last date of the month (April) via a ```$ref``` to the calendar component. I need to know the dates at the start and end of the calendar too. Hope that makes sense – user931018 Apr 22 '21 at 08:55
  • Just a note, the calendar photo above is from the Vuetify website as an example. – user931018 Apr 22 '21 at 09:32

1 Answers1

3

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);
...
ganey
  • 556
  • 3
  • 14