每周 vuejs 日历不显示事件答案

【问题标题】：weekly vuejs calendar does not display events每周 vuejs 日历不显示事件
【发布时间】：2019-09-03 02:36:49
【问题描述】：

周历无法正确显示事件。甚至来自https://vuetifyjs.com/en/components/calendars 的sn-p 代码也会给我一个空日历。我想使用该功能，但找不到以下 sn-p 出了什么问题。

我注意到模板 v-slot:dayHeadere 中有错字，并将其修复为 dayHeader。仍然，不起作用。 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>

这个sn-p是直接从vuejs网站保存的。（到我保存它的时候，它至少不能正常工作）。

我希望事件能够正确显示。如果有人尝试使用此每周日历并成功，请告诉我您如何解决它。我将不胜感激！

【问题讨论】：

标签： vue.js calendar vuetify.js

【解决方案1】：

只需在您的<template> 中将 v-slot 替换为 slot 和 slot-scope：

替换

<template v-slot:dayHeader="{ date }">

和

<template v-slot:dayBody="{ date, timeToY, minutesToPixels }">

由

<template slot="dayHeader" slot-scope="{ date }">

和

<template slot="dayBody" slot-scope="{ date, timeToY, minutesToPixels }">

这是一个工作的代码笔： https://codepen.io/anon/pen/ErPZrK

【讨论】：