CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Kunal Ahirrao
Kunal Ahirrao

Reputation: 31

Vuetify Calendar -- Customizing default Head Day Label

I am using Vuetify calendar for making appointments. I tried to customize the default header of the calendar using slots but not getting expected result.Wants to customize it like as shown in the image ... I want to make the default header bar like this Code 

<v-calendar ref="calendar" :now="today" :value="today" :events="events" color="primary" type="week">
        <template v-slot:day-header="{date}">
          <v-btn color="success">{{date}}</v-btn>
        </template>

Codepen for the same: https://codepen.io/spider007/pen/YzyGgPY

Upvotes: 1

Views: 1994

Answers (1)

md_dan
md_dan

Reputation: 9

You can use the attribute weekday-format with a custom function the input is the event and then you can return custom headings

Upvotes: 1

Related Questions