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>