How to get category value in slot (Vuetify calendar)

user_14767796 0
Viewed 835

I am having trouble figuring out how to have hover functionality in categories view of Vuetify calendar in the body part (slot day-body). Now when I implement the hover functionality, the whole row has the hover, but I am hovering over one category only. Everything else such as the week, day and 4-day is working properly because I can individually get date, week and timeToY from the day-body slot.

<template v-slot:day-body="{ date, timeToY }">
  <div :class="{ hover: isHover && date === hoverDate }"
       :style="{ top: `${timeToY(hoverY)}px` }">
     <p class="mt-2 ml-2">{{ hoverY }}</p>
  </div>
</template>

This is the HTML that I am using and these two events @mousemove:time="hoverToSeeTime" and @mouseleave:time="removeHover". In the mousemove handler I assign isHover, hoverDate and hoverY. But I can't grasp how to make individual category tiles hoverable because day-body slot does not have the category key. Am I missing anything?

Thanks in advance.

vuejs2 vue-component vuetify.js vue.js javascript
1 Answers

Use @mousemove:time-category and @mouseleave:time-category instead and category will be available in the event handler. Then you can set a hoverCategory along with the other hover properties:

hoverToSeeTime({ date, time, category }) {
   ...
   this.hoverCategory = category;
   ...
}

category is available in the slot props:

<template v-slot:day-body="{ date, week, timeToY, category }">

So you can compare the two in the slot template. Adjust that template to use a v-if on the div instead of a conditional class:

<template v-slot:day-body="{ date, week, timeToY, category }">
   <div v-if="category == hoverCategory && date === hoverDate"
       class="hover" :style="{ top: `${timeToY(hoverY)}px` }"
   >
      <p class="mt-2 ml-2">{{ hoverY }}</p>
   </div>
</template>

Here is an updated codepen

user_21850930
Related