weekly vuejs calendar does not display events - vue.js

Question

The weekly calendar does not display events properly. Even the snippet code from the https://vuetifyjs.com/en/components/calendars also render me an empty calendar. I wanted to use the feature but I could not find what went wrong with the following snippet.
I noticed a typo in template v-slot:dayHeadere and have fixed it to dayHeader. Still, does not work.
https://codepen.io/anon/pen/mgwjee?&editable=true&editors=111
<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex>
<v-sheet height="400">
<!-- now is normally calculated by itself, but to keep the calendar in this date range to view events -->
<v-calendar
ref="calendar"
:now="today"
:value="today"
color="primary"
type="week"
>
<!-- the events at the top (all-day) -->
<template v-slot:dayHeader="{ date }">
<template v-for="event in eventsMap[date]">
<!-- all day events don't have time -->
<div
v-if="!event.time"
:key="event.title"
class="my-event"
#click="open(event)"
v-html="event.title"
></div>
</template>
</template>
<!-- the events at the bottom (timed) -->
<template v-slot:dayBody="{ date, timeToY, minutesToPixels }">
<template v-for="event in eventsMap[date]">
<!-- timed events -->
<div
v-if="event.time"
:key="event.title"
:style="{ top: timeToY(event.time) + 'px', height: minutesToPixels(event.duration) + 'px' }"
class="my-event with-time"
#click="open(event)"
v-html="event.title"
></div>
</template>
</template>
</v-calendar>
</v-sheet>
</v-flex>
</v-layout>
</v-app>
</div>
This snippet is saved directly from the vuejs website. (By the time I saved it, it doesn't work properly at least).
I expect the events to be displayed properly. If anyone has tried to use this weekly calendar and succeed please tell me on how do you fix it. I would be really appreciated!

Answer 1

Just replace v-slot by slot and slot-scope in your <template>:
Replace
<template v-slot:dayHeader="{ date }">
and
<template v-slot:dayBody="{ date, timeToY, minutesToPixels }">
by
<template slot="dayHeader" slot-scope="{ date }">
and
<template slot="dayBody" slot-scope="{ date, timeToY, minutesToPixels }">
here's a codepen working :
https://codepen.io/anon/pen/ErPZrK