时间戳

首页 > 解决方案 > 每周vuejs日历不显示事件

vue.js - 每周vuejs日历不显示事件

问题描述

周历无法正确显示事件。甚至来自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 网站保存。（当我保存它时，它至少不能正常工作）。

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

标签： vue.jscalendarvuetify.js

解决方案

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

代替

<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

推荐阅读