FullCalendar 2.3.0更改悬停时的日颜色 [英] FullCalendar 2.3.0 Change day colour on hover

问题描述

悬停事件需要在 .fc-bg上捕获.fc-day 和 .fc-content-skeleton .fc-day-number 来达到此目的。这工作正常，直到我使用作为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-numberstyle =width：21px>< / td> 
< td colspan =3>< / td> 
< td colspan =1class =fc-bgevent available>< / td> 
< td colspan =3>< / td> 
< / tr> 
< / tbody>< / table> 
< / div> 
  

解决方案

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

.fc-day：hover {
background：浅蓝;

$ b $ *允许指针事件通过* /
.fc-slats，/ * horizo​​ntals * /
.fc-content-skeleton，/ * day数字* /
.fc-bgevent-skeleton / *事件容器* / {
指针事件：无
}

/ *重新打开指针事件* /
.fc-bgevent，
.fc-event-container {
pointer-events：auto; / *事件* /
}


JSFiddle

除非这会给你带来一个特定的不可解决的问题，否则这是最好的方法。你可能会混淆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更改悬停时的日颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！