CODEWITHSUNDEEP
vue.jsvuetify.js
Griddy
Griddy

Reputation: 123

Vue.js vuetifyjs Calendar not dispaying day events

I have a working calendar that can change based on the type property. I am able to display information in the calendar header but day events seem to be a problem.

My vue.js vuetify calendar does not display day events. It is set to display as type 'week'. I am working from the following example.

export default {
  data: () => ({
    todayDate: new Date().toISOString().substr(0, 10) /*'YYYY-MM-DD'*/ ,
    type: 'week',
    events: [{
        title: 'Weekly Meeting',
        date: '2019-02-26',
        time: '09:00',
        duration: 45
      },
      {
        title: 'Mash Potatoes',
        date: '2019-02-28',
        time: '12:30',
        duration: 180
      }
    ]
  }),

  computed: {
    eventsMap() {
      const map = {};
      this.events.forEach(e => (map[e.date] = map[e.date] || []).push(e));
      return map
    }
  }
}
</script>
<v-calendar ref="calendar" :type="type" v-model="todayDate" :now="todayDate" :value="todayDate" color="primary">

  <template slot="dayBody" slot-scope="{ date, timeToY, minutesToPixels }">
              <template v-for="event in eventsMap[date]">
                <div
                  v-if="event.time"
                  :key="event.title"
                  v-html="event.title"
                ></div>
              </template>
  </template>

</v-calendar>

Upvotes: 4

Views: 6183

Answers (2)

Hafiz
Hafiz

Reputation: 71

One of the reason could be Events are not displaying because you are missing color property in Events objects. Without color property, Events are present but not visible because by default color is white.

{
    color: 'indigo',            
    name: 'Weekly Meeting',
    date: '2019-02-26',
    time: '09:00',
    duration: 45
},

Upvotes: 0

SpotlightPL
SpotlightPL

Reputation: 11

You are probably missing event styles which are included in docs. Copy styling and edit your html file

.my-event {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px;
    background-color: #1867c0;
    color: #ffffff;
    border: 1px solid #1867c0;
    font-size: 12px;
    padding: 3px;
    cursor: pointer;
    margin-bottom: 1px;
    left: 4px;
    margin-right: 8px;
    position: relative;

    &.with-time {
        position: absolute;
        right: 4px;
        margin-right: 0px;
    }
}


</script>
<v-calendar ref="calendar" :type="type" v-model="todayDate" :now="todayDate" :value="todayDate" color="primary">

  <template slot="dayBody" slot-scope="{ date, timeToY, minutesToPixels }">
              <template v-for="event in eventsMap[date]">
                <div
                  v-if="event.time"
                  :key="event.title"
                  :style="{ top: timeToY(event.time) + 'px', height: minutesToPixels(event.duration) + 'px' }"
                  class="my-event with-time"
                  v-html="event.title"
                ></div>
              </template>
  </template>

</v-calendar>

Upvotes: 1

Related Questions