Vuetify Calendar Day Template - vuejs2

Question

I am trying to understand how the template works for the day calendar in Vuetify. When I am not using the template the data shows up in the proper time, when I add in the template it disappears. What am i missing?
Here is the code.
<v-calendar
color="primary"
type="day"
:events="events"
first-interval="6"
interval-count="14"
>
<template v-slot:day="{ start, end, name, checkedIn }">
<v-row class="fill-height">
<v-sheet color="orange lighten-2">
Hello, world! I'm a simple v-sheet {{start}} {{end}} {{name}} {{checkedIn}}
</v-sheet>
</v-row>
</template>
</v-calendar>

Answer 1

Do you mean something like this ?
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
template: '#main',
data:
{
focus: '2020-04-05',
events:
[
{
name: 'test',
start: '2020-04-05 10:00:00',
end: '2020-04-05 11:30:00',
color: 'cyan',
},
{
name: 'test',
start: '2020-04-05 07:00:00',
end: '2020-04-05 07:25:00',
color: 'green',
},
{
name: 'test',
start: '2020-04-05 08:00:00',
end: '2020-04-05 08:15:00',
color: 'red',
},
]
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app"></div>
<template id="main">
<v-app>
<v-calendar
v-model="focus"
color="primary"
:events="events"
type="day"
>
<template v-slot:event="{event}">
<div :style="{'background-color':event.color,color:'white'}" class="fill-height pl-2">{{ event.name }}</div>
</template>
</v-calendar>
</v-app>
</template>