CODEWITHSUNDEEP
fullcalendarfullcalendar-scheduler
DenisH
DenisH

Reputation: 889

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

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): enter image description here

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

Upvotes: 1

Views: 1570

Answers (2)

bla9x
bla9x

Reputation: 519

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

enter image description here

Upvotes: 0

DenisH
DenisH

Reputation: 889

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

targeting the TD cells

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:

targeting TD and TH with 2px thickness

Upvotes: 3

Related Questions