CODEWITHSUNDEEP
vue.jscalendarvuetify.js
Teamata Leoneos
Teamata Leoneos

Reputation: 95

weekly vuejs calendar does not display events

The weekly calendar does not display events properly. Even the snippet code from the https://vuetifyjs.com/en/components/calendars also render me an empty calendar. I wanted to use the feature but I could not find what went wrong with the following snippet.

I noticed a typo in template v-slot:dayHeadere and have fixed it to dayHeader. Still, does not work. 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>

This snippet is saved directly from the vuejs website. (By the time I saved it, it doesn't work properly at least).

I expect the events to be displayed properly. If anyone has tried to use this weekly calendar and succeed please tell me on how do you fix it. I would be really appreciated!

Upvotes: 2

Views: 2389

Answers (1)

Charles G
Charles G

Reputation: 1381

Just replace v-slot by slot and slot-scope in your <template>:

Replace

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

and

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

by

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

and

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

here's a codepen working : https://codepen.io/anon/pen/ErPZrK

Upvotes: 4

Related Questions