Vue.js vuetify js 日历不显示日事件

Question

我有一个可以根据类型属性更改的工作日历。我能够在日历标题中显示信息，但日期事件似乎是个问题。

我的 vue.js vuetify 日历不显示日期事件。它设置为显示为“周”类型。我正在从以下 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>

Answer 1

您可能缺少文档中包含的事件样式。复制样式并编辑您的 html 文件

.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>