Шаблон календарного дня Vuetify

Question

Я пытаюсь понять, как работает шаблон для календаря дня в Vuetify. Когда я не использую шаблон, данные отображаются в нужное время, когда я добавляю шаблон, он исчезает. Что мне не хватает?

Вот код.

 <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

Вы имеете в виду что-то подобное?

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>