Question

我试图在鼠标悬停时更改日背景颜色。

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

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

<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，但这个解决方案导致到目前为止最少的头痛。

FullCalendar 2.3.0悬停时更改日期颜色

1 个答案: