Is it possible to do alternating row background colours in FullCalendar?

Question

I applied an odd/even class to the fc-agenda-slot tr\'s, but the problem is the left/right \"cell\" border is on the fc-agenda-days table which is below, so it\'s not shown when

Answer 1

Using

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

I was able to get the rows in weekview, which I then give a certain class.

Answer 2

I'm fairly certain there is no solution to this problem.

The root of the issue is how week view is structured, which is arguably a rampant abuse of markup. It is basically a table that has columns, which then has a table overlapping it that has rows. There aren't individual cells for you to control only singular rows and columns. When you color the row you are hiding the column borders, more than likely unintentionally. As far as I can tell, this was either a design decision of the plugin or a major oversight.

In day view, this isn't a problem as you only have a single column.

Answer 3

I had the same issue and I adopted this trick: You can use an opacity attribute on the row's cssClass.

.fc-agenda-slots tr:nth-child(4n+1) td, .fc-agenda-slots tr:nth-child(4n+2) td { background-color:#E7F3F4; opacity: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;
}

This will show the border of cells, but only with cell background color opacized.. It's not the best solution ever, but it can be enough to get something fancy if you have no strong graphic constraints!

Cheers

Answer 4

Kind of late, but add this to your CSS

.fc-agenda-slots tr.d1 td {
    background-color: rgba(79, 129, 128, .2); color: black;
}

and this in your JS to execute right after you render your calendar.

$("table tr").each(function () {
     var i = $("table tr").index($(this));
     if (i % 4 == 1 || i % 4 == 2)
        $(this).addClass("d1");
});

btw this is only for week view.