Question

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

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

Vue.js vuetifyjs日历未支付全天活动

1 个答案: