FullCalendar 2.3.0悬停时更改日期颜色

FullCalendar 2.3.0 Change day colour on hover

本文关键字：日期 颜色 悬停 FullCalendar      更新时间：2023-09-26

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

为此，需要在.fc-bg .fc-day和.fc-content-skeleton .fc-day-number上捕获悬停事件。在我使用背景渲染事件作为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>

最好使用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索引、透明覆盖或大量JS，但到目前为止，这种解决方案引起的问题最少。

相关文章：