每周vuejs日历不显示事件

Question

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

我注意到模板 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>

这段代码是直接从vuejs网站保存的。（到我保存的时候，至少不能正常使用）

我希望事件能够正确显示。如果有人尝试使用这个周历并成功了，请告诉我你是如何修复它的。我将不胜感激！

Answer 1

只需将 v-slot 替换为 slot 和 slot-scope 10=]:

替换

<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 }">

这里有一个 codepen 可以工作： https://codepen.io/anon/pen/ErPZrK

每周vuejs日历不显示事件

weekly vuejs calendar does not display events

calendar

vue.js

vuetify.js