FullCalendar 2.3.0 悬停时更改日期颜色

Question

我正在尝试更改鼠标悬停时的日期背景颜色。

为此，需要在.fc-bg .fc-day 和.fc-content-skeleton .fc-day-number 上捕获悬停事件。在我使用 background render events 作为 allDay 事件之前，这可以正常工作，因为那时有第三层，其类为 .fc-bg-event-skeleton，它位于其他两层之上。底层元素的事件不再被触发，因为单元格是使用 colspan 渲染的，如果连续有背景渲染事件，我不能只突出显示一天。

是否有可能在全日历中突出显示鼠标悬停的天数？我正在使用月视图。

<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>

Answer 1

最好的办法是使用pointer-events:none 允许悬停通过某些容器元素，并使用pointer-events:auto 在仍需要指针事件的子元素上重新启用它。

.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

除非这会给您带来特定的无法解决的问题，否则这是最好的方法。您可能会弄乱 z-index、透明覆盖或大量 JS，但到目前为止，这种解决方案引起的麻烦最少。