Vuetify: [Bug Report] Named slots for v-calendar with type="week" are not applied

[milost1982]

Environment

Vuetify Version: 2.0.7
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

I've followed the Weekly example from v-calendar component docs: https://vuetifyjs.com/en/components/calendars#weekly
When I open this in codepen and change template with v-slot:day-header nothing happens (eg. I've added style="background-color: #ff0000 !important;" to it).

Also when I completely remove CSS no changes are applied to the component.
Also note that example rendered on docs page has different color for events in calendar (secondary blue color) than on codepen example (dark gray).

Expected Behavior

Templates in slots should apply to the component.

Actual Behavior

Slots are not applied nor their styles.

Reproduction Link

https://codepen.io/milost1982/pen/BaBKBJZ?&editable=true&editors=111

[milost1982]

Can someone confirm if this is a bug or is it something I did wrong in using the component?

[jacekkarczmarczyk]

day, day-header and day-body slots are not displayed if there are any events: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts#L471

However if there's no events the day-body slot contents are hidden below the intervals. Whole day has height set to 24 * day height, but if you use the following example you can find in dom elements with class day-body:

<template>
  <v-sheet height="400">
    <v-calendar ref="calendar" :now="today" :value="today" :events="events" color="primary" type="week">
      <template #day-body><div class="day-body">day-body</div></template>
      <template #day-header><div class="day-header">day-header</div></template>
    </v-calendar>
  </v-sheet>
</template>

<script>
export default {
  data: () => ({
    today: '2019-01-08',
    events: [],
  }),
  mounted () {
    this.$refs.calendar.scrollToTime('08:00')
  },
}
</script>

Not really sure what's the intended behaviour here

[milost1982]

Hello Jacek,
Is there a workaround for this at the moment? I didn't quite understand your code example. When events array is empty nothing is rendered, the whole calendar component is blank.

[jacekkarczmarczyk]

https://codepen.io/jkarczm/pen/XWrjmew?editors=1010
You can see the day header and in devtools you can find .day-body as well
I'm not really sure what should be the default behaviour of these slots, I hope @ClickerMonkey can take a look and decide

[albert0815]

This is an issue for me as well. I think the day-header should be visible also when there are events. Why would you use the calendar without events?.

Also the day-label slot is not working with type week (which it should as per the documentation). Is there any other way to change the header of the days in the week view (when having a non empty events array)?

[milost1982]

What is the status of this issue? Can we expect it to be fixed soon?

[milost1982]

Hey guys, any updates on this? It's been five months since reporting and this issue is still in "triage" status.

[KaelWD]

The bug is caused by a spread in the wrong place: https://github.com/vuetifyjs/vuetify/blob/3b2ee395345844c9ac83ce10e37c967778546b7a/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts#L467

I can move this but then the example completely breaks, the way the slot is supposed to be used seems to have been changed without properly updating the examples.

6475