Obtaining the category value within a slot of the Vuetify calendar

Question

Obtaining the category value within a slot of the Vuetify calendar

I am struggling to implement hover functionality in the categories view of Vuetify calendar within the body section (slot day-body). When I try to add hover functionality, the entire row ends up being affected by the hover effect, even though I only want it on a single category. The week, day, and 4-day views are working correctly since I can easily access 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 HTML snippet includes the usage of the following two events:

@mousemove:time="hoverToSeeTime"

and

@mouseleave:time="removeHover"

. In the mousemove handler, I set values for isHover, hoverDate, and hoverY. However, I am finding it difficult to make individual category tiles hoverable because the day-body slot does not contain a category key. Is there something crucial that I am overlooking?

Thank you in advance.

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

Utilize the @mousemove:time-category and @mouseleave:time-category events instead, allowing access to the category in the event handler. Then, you can assign a hoverCategory variable along with other hover properties:

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

The category is accessible in the slot props:

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

This allows for comparison within the slot template. Modify the template to utilize a v-if condition 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>

For an updated code example, check out this CodePen

Answer 2

Utilize the @mousemove:time-category and @mouseleave:time-category events instead, allowing access to the category in the event handler. Then, you can assign a hoverCategory variable along with other hover properties:

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

The category is accessible in the slot props:

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

This allows for comparison within the slot template. Modify the template to utilize a v-if condition 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>

For an updated code example, check out this CodePen

Obtaining the category value within a slot of the Vuetify calendar

Answer №1

Similar questions

JavaScript is claiming that my class method is invalid, despite the fact that it is obviously a valid function

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

Click to switch CodeMirror's theme

Storing a string in localStorage versus $localStorage in Angular 1 yields distinct value differences

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

Text that fades in and out based on scrolling past a specific point

How can you reset the chosen option in a Vue.js dropdown menu?

Transferring information between pages in PHP

Incorporating a swisstopo map from an external source into an Angular

Is there a way to remove a row through fetch using onclick in reactjs?

Angular 14 presents an issue where the injectable 'PlatformLocation' requires compilation with the JIT compiler; however, the '@angular/compiler' module is currently missing

Leveraging Github CI for TypeScript and Jest Testing

The fade transition will only begin once I have clicked the toggle button to make the modal appear two times

Learn how to insert JavaScript code into the head of an iframe using jQuery

How can I make the first option in a dropdown menu automatically selected in a select input form?

The default export (imported as 'Vue') could not be located within the 'vue' module in Vue 3 and Laravel

Clear SELECT After Submission

Exploring issues with jQuery

Repetitive occurrences of events being emitted from a VueJS component

Displaying a two-dimensional array from a JSON file using AngularJS ng-repeat