微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

是否可以在FullCalendar中交替显示行背景颜色?

如何解决是否可以在FullCalendar中交替显示行背景颜色?

| 我将一个奇/偶类应用于fc-议程插槽tr \,但是问题是左/右\“ cell \”边框位于下面的fc-议程日表上,所以它\'当我在fc议程插槽tr上设置背景时,未显示。 FullCalendar本身是否有允许交替行颜色的选项,还是有人找到了在FullCalendar之外进行此操作的方法?     

解决方法

        我相当确定没有解决此问题的方法。 问题的根源在于周视图的结构,这可以说是对标记的广泛滥用。它基本上是一个具有列的表,然后该表具有一个与表重叠的表,该表具有行。没有单独的单元格让您只能控制单数行和单列。当您为行着色时,您隐藏了列边框,这是无意间造成的。据我所知,这要么是插件的设计决定,要么是主要的疏忽。 在日视图中,这不是问题,因为您只有一列。     ,        有点晚了,但是将它添加到您的CSS中
.fc-agenda-slots tr.d1 td {
    background-color: rgba(79,129,128,.2); color: black;
}
并在您的JS中执行,以在您渲染日历后立即执行。
$(\"table tr\").each(function () {
     var i = $(\"table tr\").index($(this));
     if (i % 4 == 1 || i % 4 == 2)
        $(this).addClass(\"d1\");
});
顺便说一句,这仅适用于周视图。     ,        我遇到了同样的问题,我采用了这个技巧: 您可以在该行的cssClass上使用不透明度属性。 .fc-议程插槽tr:nth-​​child(4n + 1)td,.fc-议程插槽tr:nth-​​child(4n + 2)td {         背景颜色:#E7F3F4;         不透明度:0.5;     }
.fc-agenda-slots tr:nth-child(4n-1) td,.fc-agenda-slots tr:nth-child(4n) td    {
    background-color:#F3F9FA;
    opacity:0.5;
}
这将显示单元格的边界,但仅使单元格背景色不透明。 它不是有史以来最好的解决方案,但是如果您没有强大的图形约束,那么就足以使您满意! 干杯     ,        使用
slots = $element.find(\'.fc-agenda-slots tr\');
我能够获得周视图中的行,然后再进行特定的课程。     

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。