Search code examples
vue.jsvuetify.jsvcalendar

Using v-calendar with events coming in time and date format

when I look for the api event, the time would be ex: 12:00 the v-calendar abbreviates to just 12, if I look for the time that password the minutes it brings complete, since it seems to be a vuetify v-calendar behavior, someone already solved?

enter image description here

Problema com abreviação do vuetify v-calendar

Solution

  • You can use the slot #event inside VCalendar component. Like this:

    <v-calendar>
    <template #event={ parsedEvent, event }>
        {{ parsedEvent.start.time }} - {{ event.name }}
    </template>
</v-calendar>
    • parsedEvent: All the data from your event already formated.
    • event: The data from your events array.

    Using like this, you can create custom views for your events. Remember that you use the #event slot, the event-name will be ignorated by the VCalendar component, so you will need to destruct { event } to access this property.

    I suggest you to read more about the slots from the vuetify documentation. https://v2.vuetifyjs.com/en/api/v-calendar/