Как я могу показать разделение между днями в FullCalendar ResourceTimeline?

Question

Я использую представление «Временная шкала ресурсов» более или менее, как показано здесь: https://fullcalendar.io/docs/timeline-custom-view-demo, но я хотел бы показать разделение между днями, потому что в противном случае действительно трудно определить, где заканчивается один день и начинается другое.

Нечто подобное (хотя, очевидно, за событиями):

Вопрос уже был задан в возрасте go здесь: FullCalendar разделительные линии между днями , но ответы не работают с Fullcalendar 4.

Answer 1

Вот частичное решение: как предположил @ADyson, можно настроить таргетинг на ячейки таблицы, используя атрибут data-date. К сожалению, это немного от 1027 *. На данный момент в нашем календаре отображаются видимые часы с 8:00 до 18:00, поэтому я должен выбрать целевые ячейки td с атрибутом данных "08:00:00" следующим образом:

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

И эти ячейки выделены как ниже (хотя вы можете видеть, что красная линия фактически находится ниже горизонтальных линий сетки

Однако это не влияет на ячейки заголовка. Я могу добавить другое правило:

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

Но когда ширина границы составляет всего 1 пиксель, она не отображается, даже если я добавлю important. Если я сделаю ее шириной 2 пикселя, тогда она будет работать. Итак, вот окончательные CSS правила:

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

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

А вот как это выглядит: