Можно ли сделать чередующиеся цвета фона строки в FullCalendar?

Question

Я применил нечетный / четный класс к tr-слотам fc-повестки дня, но проблема в том, что левая / правая граница "ячейки" находится в таблице fc-повестки дня-дней, которая ниже, поэтому она не отображается, установить фон на tr-слоте fc-повестки дня.

Есть ли в самом FullCalendar вариант, позволяющий чередовать цвета строк, или кто-то нашел способ сделать это вне FullCalendar?

Answer 1

Я вполне уверен, что нет решения этой проблемы.

Корень проблемы в том, как структурируется представление недели, что, вероятно, является повсеместным злоупотреблением разметкой. В основном это таблица, в которой есть столбцы, а затем перекрывающая ее таблица со строками. Не существует отдельных ячеек для управления только единичными строками и столбцами. Когда вы окрашиваете строку, вы скрываете границы столбцов, скорее всего, непреднамеренно. Насколько я могу судить, это было либо дизайнерское решение плагина, либо серьезный недосмотр.

В дневном режиме это не проблема, так как у вас есть только один столбец.

Answer 2

У меня была такая же проблема, и я принял этот трюк: Вы можете использовать атрибут непрозрачности в строке cssClass.

.fc-повестки дня-слотов tr: nth-child (4n + 1) td, .fc-повестки дня-слотов tr: nth-child (4n + 2) td { цвет фона: # E7F3F4; Непрозрачность: 0,5; }

.fc-agenda-slots tr:nth-child(4n-1) td, .fc-agenda-slots tr:nth-child(4n) td    {
    background-color:#F3F9FA;
    opacity:0.5;
}

Это покажет границу ячеек, но только с окрашенным цветом фона ячейки. Это не самое лучшее решение, но этого может быть достаточно, чтобы получить что-то необычное, если у вас нет сильных графических ограничений!

Приветствия

Answer 3

Довольно поздно, но добавьте это в свой CSS

.fc-agenda-slots tr.d1 td {
    background-color: rgba(79, 129, 128, .2); color: black;
}

и это в вашем JS для выполнения сразу после рендеринга вашего календаря.

$("table tr").each(function () {
     var i = $("table tr").index($(this));
     if (i % 4 == 1 || i % 4 == 2)
        $(this).addClass("d1");
});

Кстати, это только дляпросмотр недели.

Answer 4

Используя

slots = $element.find('.fc-agenda-slots tr');

Мне удалось получить строки в обзоре недели, которые я затем присвоил определенному классу.