FullCalendar 2.3.0 Change day colour on hover

问题:

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> 

回答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.

文章来源: FullCalendar 2.3.0 Change day colour on hover