Change colors in fullcalendar 5.7 based on alternating rows -- which element for nth-child?

user_9536586 0
Viewed 39

There have been posts on this. I have done this:

.fc table tr td:nth-child(odd) {
    border-collapse: collapse;
    border-spacing: 0;
    background: rgba(240,240,247,1);
    font-size: 1em
}

(also tried with .fc-scrollgrid -- all the same)

but that gives the 2 colors on alternating columns, not rows, since the tr's go by weekday.

So one post (from 5 years ago) which suggests

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

says:

Also, you need to target the series of 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).

But when I look in the browser at these events in the browser, I don't see any divs in there. I don't know which element to target to get this to work.

I am trying to apply this to the month view (dayGridMonth) in fullCalendar 5.7

Any ideas? -- Thanks

fullcalendar-5 fullcalendar css html
1 Answers

In the dayGridMonth view in fullCalendar 5.x, each row in the grid has the following HTML:

<tr role="row">

These are within a <tbody role="presentation"> table body element (to distinguish them from other <tr>s such as the column heading row, which have the same row).

This can be seen by looking at the calendar's generated HTML using a browser's element inspector tool.

So you can target the alternating rows with a CSS rule something like this:

.fc-dayGridMonth-view tbody[role=presentation] tr[role=row]:nth-child(odd)

Demo: https://codepen.io/ADyson82/pen/mdxJYpp

user_59470430
Related