I'm trying to change the day background colour on mouse hover.

The hover event needs to be captured on .fc-bg .fc-day and .fc-content-skeleton .fc-day-number for this purpose. This works ok until I use background render events as allDay events, because then there is a third layer with class .fc-bg-event-skeleton which is lying on top of the other two layers. The events of the underlying elements are not fired anymore and because cells are rendered using a colspan I cannot highlight just one day if there are background render events in a row.

Is there any possibility to highlight days on mouseover in fullcalendar? I'm using the month view.

<div class="fc-bg">...</div>
<div class="fc-content-skeleton">...</div>
<div class="fc-bgevent-skeleton">
    <table><tbody>
        <tr>
             <td class="fc-week-number" style="width:21px"></td>
             <td colspan="3"></td>
             <td colspan="1" class="fc-bgevent available"></td>
             <td colspan="3"></td>
        </tr>
   </tbody></table>
</div>

I'm trying to change the day background colour on mouse hover.

The hover event needs to be captured on .fc-bg .fc-day and .fc-content-skeleton .fc-day-number for this purpose. This works ok until I use background render events as allDay events, because then there is a third layer with class .fc-bg-event-skeleton which is lying on top of the other two layers. The events of the underlying elements are not fired anymore and because cells are rendered using a colspan I cannot highlight just one day if there are background render events in a row.

Is there any possibility to highlight days on mouseover in fullcalendar? I'm using the month view.

<div class="fc-bg">...</div>
<div class="fc-content-skeleton">...</div>
<div class="fc-bgevent-skeleton">
    <table><tbody>
        <tr>
             <td class="fc-week-number" style="width:21px"></td>
             <td colspan="3"></td>
             <td colspan="1" class="fc-bgevent available"></td>
             <td colspan="3"></td>
        </tr>
   </tbody></table>
</div>

• javascript
• jquery
• fullcalendar

1 Answer 1

Your best bet is to use pointer-events:none to allow the hover to pass through certain container elements and pointer-events:auto to re-enable it on child elements that still need pointer events.

.fc-day:hover{
    background:lightblue;
}

/*Allow pointer-events through*/
.fc-slats, /*horizontals*/
.fc-content-skeleton, /*day numbers*/
.fc-bgevent-skeleton /*events container*/{
    pointer-events:none
}

/*Turn pointer events back on*/
.fc-bgevent,
.fc-event-container{
    pointer-events:auto; /*events*/
}

JSFiddle

Unless this causes a specific unsolvable problem for you, this is the best way. You could mess with z-index, transparent-overlays or a lot of JS but this solution causes the least headaches by far.