How can I show separation between days in a FullCalendar ResourceTimeline?

Question

I'm using the Resource Timeline view more or less as shown here: https://fullcalendar.io/docs/timeline-custom-view-demo, but I'd like to show a separation between days because otherwise it's really difficult to tell where one day ends and another begins.

Something like this (though behind the events obviously):

The question was already asked ages ago here: FullCalendar dividing lines between days, but the answers don't work with Fullcalendar 4.

Answer 1

Here's a partial solution: As @ADyson suggested, it's possible to target the table cells using the data-date attribute. Unfortunately this is a bit fragile. At the moment, our calendar shows visible hours from 8am to 6pm, so I have to target td cells which have a data attribute of "08:00:00" as follows:

  td[data-date$="08:00:00"] {
    border-left: 1px solid red;
  }

And this highlights the cells as below (though you can see that the red line is in fact below the horizontal grid lines

However, this doesn't affect the header cells. I can add another rule:

  th[data-date$="08:00:00"] {
    border-left: 1px solid yellow;
  }

But when the border width is only 1px, it doesn't show up, even if I add important. If I make it 2px wide, then it works. So here are the final CSS rules:

  th[data-date$="08:00:00"] {
    border-left: 2px solid red;
  }

  td[data-date$="08:00:00"] {
    border-left: 2px solid red;
  }

And here's what it looks like:

Answer 2

I managed to get this going using a similar method to above on version 3 of FullCalendar, by using the eventAfterAllRender method as my start and end hours can differ

    $(".fc-timeline .fc-head .fc-time-area tr:first-child th").attr("style", "border-left-color: #C0C1C1 !important; border-right-color: #C0C1C1 !important")

    $(".fc-timeline .fc-head .fc-time-area tr:nth-child(2) th[data-date$='" + startString + "']").attr("style", "border-left-color: #C0C1C1 !important")
    $(".fc-timeline .fc-head .fc-time-area tr:nth-child(2) th[data-date$='" + finishString + "']").attr("style", "border-right-color: #C0C1C1 !important")

    $(".fc-timeline .fc-body .fc-time-area .fc-bg .fc-slats td[data-date$='" + startString + "']").attr("style", "border-left-color: #C0C1C1 !important")

Where the start/finishStrings look like "08:00:00" for example