Vuetify Calendar exclude events that are in the next and previous months from view

13 Views Asked by At

So I am using the Vuetify 2 VCalendar and I was wonder if it would be possible to exclude the events from show in previous and next months in the view, so this is what I am talking about:

enter image description here

Currently, I am viewing "March 2024", but I am seeing "April 2024" events as shown in the screenshot.

This is the vcalendar code call:

                        <v-calendar
                            ref="calendar"
                            v-model="focus"
                            :type="type"
                            :events="shifts"
                            event-color="#f1f3f4"
                            event-text-color="#333"
                            :event-margin-bottom="5"
                            :event-height="155"
                            :events-more="false"
                            :show-week="false"
                            @click:event="handleClickEvent"
                            @click:date="!isDateBeforeToday($event) && isLoggedIn ? prepareAndOpenShiftCreationDialog($event) : null"
                            @click:day="!isDateBeforeToday($event) && isLoggedIn ? prepareAndOpenShiftCreationDialog($event) : null"
                            @change="loadAndUpdateShifts"
                        >
                        <template v-slot:event="{ event }">
                            <calendar-day :event="event" :is-logged-in="isLoggedIn"></calendar-day>
                        </template>
                        </v-calendar>

I am not sure if there is an appropriate prop or anything, but I would love to know.

0

There are 0 best solutions below