Timeline: highlight current resource on timeline row mouse hover

Event calendars & schedulers
1

Hi,

I would like to highlight the current resource on timeline row mouse over event, like this is done with the current time step.
For example, in this instance, I would like to highlight “Kate”:
image

How can I achieve this ?

2

Hello @tanguy :wave:

It’s possible to achieve this behavior with a CSS-only solution.
Here is a quick custom CSS for this screnario:

.mbsc-timeline-column:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
​
3

Hello,
This css will add a blue border on the time row time step.
But I want to apply a css class on the current resource
image

4

Hi @tanguy,

If you’d like to highlight the whole resource row you can try the following:

.mbsc-timeline-row:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 5;
  pointer-events: none;
}

Let me know if this what you need.

5

Hi,

Thanks for your answer, but that’s not what I would like.
Your css will highlight the timeline row without the resource part to the left of the row.
Me, I want highlight only the resource part when the mouse is over the corresponding timeline row (from a CSS point of view, I want to adding styles on mbsc-timeline-resource class)

6

Hi @tanguy

I do not think it is possible at the moment. There are feature requests for onCellHoverIn lifecycle event on timeline which would solve your requirements. This event triggers only on the calendar view at the moment.

Let us know if there is anything else.