Question

我将一个奇数/偶数类应用于fc-agenda-slot tr，但问题是左/右“单元格”边界位于fc-agenda-days表的下方，所以当我没有显示时在fc-agenda-slot tr上设置背景。

FullCalendar本身是否有一个选项允许交替的行颜色或有人在FullCalendar之外找到了这样做的方法？

Answer 1

我很确定这个问题没有办法解决。

问题的根源是如何构建周视图，这可以说是滥用标记的猖獗。它基本上是一个包含列的表，然后有一个表与行重叠。您没有单独的单元格来控制单个行和列。当您为行隐藏列边框时，很可能无意中隐藏了列边框。据我所知，这可能是插件的设计决定还是主要的疏忽。

在日视图中，这不是问题，因为您只有一列。

Answer 2

我有同样的问题，我采用了这个技巧：您可以在行的cssClass上使用opacity属性。

.fc-agenda-slots tr：nth-child（4n + 1）td，.fc-agenda-slots 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;
}

这将显示单元格的边框，但只有单元格背景颜色不透明。它不是有史以来最好的解决方案，但是如果没有强大的图形限制，它就足以获得一些奇特的东西！

干杯

Answer 3

使用

slots = $element.find('.fc-agenda-slots tr');

我能够在周视图中获取行，然后我给出了某个类。

Answer 4

我在这里遇到了同样的问题。虽然在我的例子中是关于资源视图，但我认为应该可以将 table-striped 类添加到日历中，因为它使用的是引导主题。在研究了一段时间的代码后，我确定了两个可以“条带化”的表。我在 render() 命令之后添加了以下代码：

....    
...
calendar.render();    

$('.fc-datagrid-body').addClass('table-striped');
$('.fc-scrollgrid-sync-table.table-bordered').addClass('table-striped');

它成功了！我有条纹车道。默认颜色对我来说有点太暗了，所以我用下面的代码改变了颜色：

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #f1f1f1; <!-- color I prefer above the default -->
}

希望它也适用于您！

是否可以在FullCalendar中执行交替行背景颜色？

4 个答案: