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

The Sortable feature is functional in all browsers except for Firefox

Is there a way to undo the click event in Javascript?

Send data in JSON format from an AngularJS client to an Express server

Exploring Multilingual Autocomplete or: Best Practices for Managing Multiple Languages in Web Applications

`Setting the response as an ArrayBuffer can be achieved on the client side, but it cannot be

Creating a Vue.js application using Visual Studio Code

Will there ever be a possibility in the future to compile from D 2.0 to Javascript?

The Angular7 counterpart of the C# attribute decorator

Trouble with an external .js script

Issues with displaying AJAX Bootstrap Modals

Having difficulty installing npm due to version issues while working with Vue

The JavaScript animations in AngularJS using ng-class are not being activated

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Steps to incorporate / insert Angular directive in an application

Switch the 360-degree images by clicking a button using Panolen.js

I have successfully implemented ngCordova local notifications, but now I am looking for a way to make it trigger for each individual

receiving unexpected data while using AJAX

Showing JSON data in AngularJS

"Exploring the Mini Drawer feature on Material UI brings up a whole new page for the Link

What is the purpose of the c() function in JavaScript?