События полного календаря имеют ненасыщенный цвет фона

Я использую представления ресурсов и временной шкалы fullCalendar и заметил, что цвета фона события ненасыщенные.

Я использовал разные способы установки их цвета, включая настройку всех цветов фона событий с помощью CSS, и все работает (т.е. у меня нет проблем с изменением цветов событий), за исключением того, что цветам не хватает насыщенности.

Например, используя CSS следующим образом:

div#calendar {
  background-color: red !important;
}
.fc-timeline-event {
  background-color: red !important;
}

Я ожидаю, что и фон таблицы, и события будут насыщенно-красными. Предыстория есть, а событий нет. Проверка с помощью цветового сэмплера показывает, что фон #ff0000, но ячейки #ff5952, что соответствует насыщенности красного до 68%.

Как ни странно, инспектор браузера показывает вычисленный цвет фона как #ff0000.

Любые идеи о том, как добиться отображения с полностью насыщенными цветами?


colors css fullcalendar fullcalendar-3 fullcalendar-scheduler
person Christer Fernstrom    schedule 09.05.2019    source источник
comment
это fullCalendar v3 или v4? И вы используете определенную тему или по умолчанию? P.S. лучший способ установить цвета событий — использовать параметры fullCalendar: fullcalendar.io/docs/event-display — таким образом вы можете настроить таргетинг на события во всех представлениях, а не только в одном, поскольку HTML и CSS различаются в разных представлениях.   -  person ADyson    schedule 09.05.2019
comment
полный календарь 3.9. Я пытался использовать отображение событий, но результат тот же. Я не менял тему. И, как было сказано ранее, инспектор браузера показывает цвет фона как насыщенный (в данном случае # ff0000), но он отображает ненасыщенный. Я думал, что может быть наложение элемента с полупрозрачным альфа-каналом, но не видел ни одного с помощью инспектора браузера.   -  person Christer Fernstrom    schedule 09.05.2019
comment
На самом деле я не предлагал отображение событий как способ решения проблемы, просто как лучший способ, в целом, установить цвета событий, а не использовать общие правила CSS. Это было отдельное замечание.   -  person ADyson    schedule 10.05.2019
comment
В любом случае, я согласен, что ожидал какого-то правила альфы или непрозрачности, накладывающего элементы события, но пока я не нашел ничего... странного.   -  person ADyson    schedule 10.05.2019

Ответы (2)


arrow_upward
2
arrow_downward

У меня есть решение.

В вашем коде стиля CSS вы помещаете код ниже

 .fc-bgevent {
    opacity: 1;
 }

Номер 1 выше можно изменить на 0,9, 0,8 и т. д. Он заменит стиль фонового события.

И это работает для меня!

person XJie Deng    schedule 19.11.2019
comment
Ваше решение не работает именно так, как вы говорите для меня (может быть, потому что я использую представление временной шкалы), но вы поставили меня на правильный путь, я обнаружил, что есть наложение с белым цветом фона и непрозрачностью 0,25. Изменение непрозрачности этого наложения на 0 решает проблему. Смотрите мой ответ ниже. - person Christer Fernstrom; 20.11.2019
comment
@ChristerFernstrom Да, я нашел то, что вы нашли, и я просто даю решение напрямую :) - person XJie Deng; 25.11.2019

arrow_upward
0
arrow_downward

Fullcalendar CSS содержит правило, которое накладывает на календарь белый цвет с непрозрачностью 25%. Это вызывает проблему:

.fc-event .fc-bg {
    z-index : 1;
    background; #fff;
    opacity: 0.25
 )

Непрозрачность должна быть установлена ​​​​на 0. Поэтому я добавил это в свою собственную таблицу стилей:

.fc-event .fc-bg {
    opacity: 0 !important;
}
person Christer Fernstrom    schedule 20.11.2019