FullCalendar 2.3.0更改悬停时的日颜色

问题描述

悬停事件需要在 .fc-bg上捕获.fc-day 和 .fc-content-skeleton .fc-day-number 来达到此目的。这工作正常，直到我使用

除非这会给你带来一个特定的不可解决的问题，否则这是最好的方法。你可能会混淆z-index，透明覆盖或许多JS，但这个解决方案导致了迄今为止最少的麻烦。

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>

解决方案

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更改悬停时的日颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！