Handling style when hovering on slot

[NedalEldeen]

Clear and concise description of the problem

Currently, if I want to style a slot when I hover on it, it does not work properly. I'm using slotPropGetter as

slotPropGetter={() => ({
  style: {
    minHeight: '50px',
  },
  className: 'hover:bg-gray-100', // it's a tailwind css
})}

It works only if I hover on the small end portion of the cell as;

I'm guessing the issue happens because rbc-events-container covers the slots.

When I tried to deal with the z-index it broke the calendar behavior. For example;

• Giving rbc-time-slot a big z-index like 1000 will affect the selection of multiple slots behavior.
• Giving rbc-time-slot a big z-index like 1 will affect the selection of the events.

Suggested solution

Unfortunately, I had no time to dig deeper into the codebase to suggest a proper solution but I wanted to raise this ticket because I think this addition will help us to deliver a good user experience.

Alternative

No response

Additional context

No response

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[NedalEldeen]

Similar #2288