1

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 I set the background on the fc-agenda-slot tr's.

Is there an option within FullCalendar itself that will allow alternating row colours or has someone found a way to do this outside of FullCalendar?

SomethingOn
  • 9,813
  • 17
  • 68
  • 107
  • There wont be an option for that. That is themeing and you will have to try harder to get it to work better. – Piotr Kula Jun 13 '11 at 14:07

6 Answers6

3

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.

Akkuma
  • 2,215
  • 3
  • 16
  • 21
2

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

andrea.spot.
  • 496
  • 4
  • 9
1

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.

keshav
  • 866
  • 11
  • 19
0

Using

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

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

koosvdkolk
  • 341
  • 2
  • 4
0

I faced the same problem here. Although it is about the resource view in my case, I thought that it should be possible to add the table-striped class to the calendar, because it is using the bootstrap-theme. After studying the code for a while, I identified two tables that could be 'striped'. I added the following code after the render() command:

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

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

And it did the trick! I've got striped lanes. The default color was a little bit too dark for me, so I changed the color with the following code:

.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 -->
}

I hope it works for you as well!

eheydenr
  • 1,000
  • 11
  • 10
0

I succeeded with this code:

$('.fc-time-area.fc-widget-content').find('tr:even').css("background-color", "rgba(220,220,220,0.1)");
UglyBlueCat
  • 439
  • 1
  • 7
  • 22