CODEWITHSUNDEEP
calendarvuetify.js
perfectCircle1981
perfectCircle1981

Reputation: 7

Vuetify Calendar: is there a way to remove the time interval from the event label

I am using Vuetify to create a calendar app. I would like to get rid of the time interval before each events. The following image would demostrate my intention here:

https://i.sstatic.net/uvFlk.png

Here I would like to only leave the name of the event displayed and the time value like "22:15" or "11 Uhr" should be removed. This should apply for all types of calendar: month, week and day. The events are not all-day-events but I still want to not display the time interval.

By checking the API documentation I found the prop "show-interval-label" which is unfortunately not working.

I wonder if there is a way to achieve this.

Thank you.

Upvotes: 0

Views: 1609

Answers (1)

Igal
Igal

Reputation: 6093

You would have to use slots (please refer to the official documentation).

In your case it should be something like:

<v-calendar
  ref="calendar"
  v-model="value"
  :weekdays="weekday"
  :type="type"
  :events="events"
  :event-overlap-mode="mode"
  :event-overlap-threshold="30"
  :event-color="getEventColor"
  :show-interval-label="showInterval"
  @change="getEvents"
>
  <template v-slot:event="{ event }">
    {{event.name}}
  </template>
</v-calendar>

Upvotes: 0

Related Questions