-1

(I check this post already ) I try to alternate the week background color from fullcalendar, I try a lot of it, but it changes all my background or just change the event background only. I use chrome inspect tools and see they use the table, but each table doesn't have a class name.

//Here's the code I try:

table tr:nth-child(even) {
background: #CCC
}

table tr:nth-child(odd) {
background: #FFF
}

Up there code only change my event content background color, not the whole week row background.

Thank you all so much!

madebymt
  • 377
  • 1
  • 4
  • 27
  • which view type are we talking about? agenda? month? list? timeline? The markup is entirely different in each case. – ADyson Nov 23 '17 at 09:51
  • Hi ADyson, Thank you for the response, just regular month views, with events on it, thank you. – madebymt Nov 25 '17 at 23:37

2 Answers2

1

Instead of using nth-child, use nth-of-type.

Also, you need to target the series of <div> elements which represent the rows - they are not a table. They're inside a table, and there are more tables inside them, but the rows themselves are actually <div>s (you can see this when you inspect the rendered HTML of the calendar using your browser tools).

.fc-day-grid > div.fc-row:nth-of-type(even) {
    background: #CCC;
}

See http://jsfiddle.net/sbxpv25p/66/ for a working demo.

Credit to this answer: CSS div alternating colour for providing a generic example of alternating colours on divs - effectively this solution is not specific to fullCalendar, it's specific to the structure of the HTML.

ADyson
  • 57,178
  • 14
  • 51
  • 63
0

For the @fullcalendar angular implementation, you can achieve this by using this selector

.fc-timegrid-slots tr:nth-of-type(even) {
    background: #CCC;
}
Nicolas Mariano Obregon
  • 383
  • 2
  • 9