Vuetify: [Bug Report] [2.0.0] [VCalendar] Event slot doesn't work if initial events array is empty

[xplodwild]

Versions and Environment

Vuetify: 2.0.0-beta.7
Vue: 2.6.10
Browsers: Chrome 75.0.3770.100
OS: Linux x86_64

Steps to reproduce

1) Setup a custom event scoped slot (<template v-slot:event="event">)
2) Pass an empty events array to the <v-calendar> component
3) Add an element to the events array

Expected Behavior

The event should display on the calendar, containing the scoped slot layout

Actual Behavior

The event, or any event added, doesn't display

Reproduction Link

https://codepen.io/anon/pen/pXGPzw

Other comments

Note that it works if you don't define a custom event slot-scope template, or if there is at least one element in the initial events array when the V-Calendar component is mounted.

Also, please note that the "event" slot isn't in the documentation, I figured it from the code.

[ClickerMonkey]

The issue actually lies with how you overrode the event slot. Without your slot override the event is actually there.

https://codepen.io/anon/pen/ydZRBb

[xplodwild]

@ClickerMonkey I agree, however the event slot is not even instantiated/mounted by the VCalendar component if the initial events array is empty.

It is a bug to me, as the slot override should be properly instantiated even when the events are loaded afterwards. It is not due to the contents of the slot override, as the template is not even mounted by the VCalendar component in this case (genTimedEvent is not called). As long as there is at least one event in the events array, even if it's {}, then the slot override will work as intended.

This issue will occur with every person loading the events asynchronously, with an empty initial events array, and who overrode the event slot (and I guess many VCalendar users will do - even just having 24-hour formatted time inside events requires overriding the slot).

[riaanduplessis]

@ClickerMonkey Not sure why this is closed as I'm also having trouble with this issue now, is there some way to "correctly" implement the event slot?

The Vuetify docs do not seem to specify how to make use of the event slot and in the API explorer, the event slot is not shown under the "slots" tab for the calendar either, any specific reason for this?

[domzware]

Hi, any workaround on this issue? It's still occurring on v2.0.10.

[xplodwild]

@domzware My workaround was to pass a fake event in the original data. As long as there is at least one event when the VCalendar is mounted, it will work fine afterwards.

Might be worth reopening another issue, since this one has been closed and might not notify relevant people...

@ClickerMonkey Still not willing to fix this issue? I might give it a try someday otherwise.

[riaanduplessis]

@domzware @xplodwild's solution works, as an example I start with an events property in my component's data with an initial event as follows:

data() {
 events: [{ start: "1900-01-01", name: "" }],
}

[qmo2015]

This bug also occurs when event slot is not overrode but other slots are.

[AlexandroWillianHervis]

It's still occurring on v2.2.3 :(

[phayes]

@ClickerMonkey - This took me an hour to debug, and was utterly baffling until I found this ticket.

I would recommend re-opening this ticket since this seems to have caught quite a few number of people unaware.