CODEWITHSUNDEEP
vue.jsvuetify.js
Marat Safyanov
Marat Safyanov

Reputation: 21

How can i add information to event in vuetify v-calendar?

Can i add some more information or details to event in vuetify v-calendar, because now it's just name and event time. Thanks.

Upvotes: 2

Views: 4318

Answers (1)

Václav Procházka
Václav Procházka

Reputation: 340

You can use slot event: https://vuetifyjs.com/en/api/v-calendar/#event

Template:

<v-calendar
    v-model="value"
    :weekdays="weekday"
    :type="type"
    :events="events"
    @change="getEvents"
>
    <template v-slot:event="{ event }">
        {{ event.moreInformation }}
    </template>
</v-calendar>

Script:

export default {
  data: () => ({
    events: [
      {
        name: "Event name",
        moreInformation: "Event more information"
      }
    ]
  })
};

Upvotes: 3

Related Questions