Vuetifyのv-calendarでv-slot:eventを使ってevent.nameのデザインを変更したいとき
今回はVuetifyのでv-slot:eventを使ってevent.nameのデザインを変更したいときどのようにすれば良いのかについてご紹介いたします。
Vuetifyのv-calendarでv-slot:eventを使ってevent.nameのデザインを変更したいとき
結論だけさらりと書きます。
下記のように書きましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<v-sheet height="600"> <v-calendar ref="calendar" v-model="value" :weekdays="weekday" :type="type" :events="events" :event-overlap-mode="mode" :event-overlap-threshold="30" :event-color="getEventColor" @change="getEvents" > <template v-slot:event="{ event }"> <div class="pl-1 event-name"> {{ event.name }} </div> </template> </v-calendar> </v-sheet> |
最新のVuetifyのバージョンでは、
v-slot:event
を
#event
のように書いても構いません。
上記のように書けばVuetifyのeventの名前をv-slotとして定義でき、自由にいじれるはずです。
終わりに
今回はVuetifyのでv-slot:eventを使ってevent.nameのデザインを変更したいときどのようにすれば良いのかについてご紹介いたしました。