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

【问题标题】：Vue.js vuetifyjs Calendar not dispaying day eventsVue.js vuetify js日历不显示日事件
【发布时间】：2019-02-26 19:16:26
【问题描述】：

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

我的 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>

【问题讨论】：

你修好了吗？
我在这里找到了解决方案：stackoverflow.com/questions/55649765/…

标签： vue.js vuetify.js

【解决方案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>

【讨论】：

这对我没有帮助。我已经有了

【解决方案2】：

其中一个原因可能是事件没有显示，因为您在事件对象中缺少颜色属性。如果没有颜色属性，事件会存在但不可见，因为默认颜色是白色。

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

【讨论】：