Как избежать накопления цвета слоя в инверсном фоне Fullcalendar

Я добавил разные часы работы для определенных дат и разных ресурсов, но слои обратного фона являются кумулятивными.

Утреннее событие имеет цвет параметра дневного события и соответственно.

Я хочу, чтобы оба события были белыми.

Пример здесь: http://jsfiddle.net/gwpoofqk/ он не зависит от рабочих часов и параметров ресурсов.

events: [
        {
            start: '2018-05-02 10:00:00',
            end: '2018-05-02 11:00:00',
            color: 'blue',
            rendering: 'inverse-background'
        },
        {
            start: '2018-05-02 14:00:00',
            end: '2018-05-02 15:00:00',
            color: 'green',
            rendering: 'inverse-background'
        }
    ]

fullcalendar fullcalendar-3 fullcalendar-scheduler
person polo7    schedule 01.05.2018    source источник
comment
Не могли бы вы показать часы работы и определения ресурсов, а также указать, какой вид вы используете и с какими настройками, пожалуйста. Тогда мы сможем легко и точно воспроизвести проблему.   -  person ADyson    schedule 01.05.2018
comment
да: businessHours: [{dow: [2, 3], начало: '08: 00 ', конец: '12: 00'}, {dow: [2, 3], начало: '13: 30 ', конец: '18: 30 '}]. Я использую двухдневный просмотр и шедулер с вертикальными ресурсами.   -  person polo7    schedule 01.05.2018
comment
не могли бы вы добавить это к вопросу, а не к комментариям (используйте кнопку редактирования, чтобы изменить свой вопрос, а также предоставьте список ресурсов по запросу.   -  person ADyson    schedule 01.05.2018
comment
Я обновил весь пост, чтобы сделать его более простым и понятным.   -  person polo7    schedule 01.05.2018

Ответы (1)


arrow_upward
2
arrow_downward

"inverse-background" заполняет все пространство, не занятое событием, для которого оно объявлено, указанным цветом. Это включает пространство, занятое другими событиями. Поскольку ваше другое событие также является фоновым событием, это не сплошной цвет, и другой цвет инверсного фона виден сквозь него. Из-за того, как календарь отображает все это, невозможно найти бит, который представляет фактическое событие, и установить его непрозрачность на 0, чтобы альтернативный фон не просматривался.

Без внесения изменений в исходный код fullCalendar, чтобы сделать вышеуказанный процесс возможным, единственный обходной путь, о котором я знаю, - как указано в документации (https://fullcalendar.io/docs/v3/background-events) - чтобы дать каждому событию одинаковый id, чтобы они были сгруппированы вместе и автоматически использовали один фон цвет. Используется цвет первого события в группе:

events: [
{
  id: 2,
  start: '2018-05-02 10:00:00',
  end: '2018-05-02 11:00:00',
  color: 'blue',
  rendering: 'inverse-background'
},
{
  id: 2,
  start: '2018-05-02 14:00:00',
  end: '2018-05-02 15:00:00',
  color: 'green',
  rendering: 'inverse-background'
}

См. http://jsfiddle.net/gwpoofqk/1/ для рабочей демонстрации.

person ADyson    schedule 01.05.2018
comment
Спасибо за эту проблему, тот же идентификатор дает то, что я хочу. Он предназначен для отображения рабочего времени персонала как ресурса. Это просто инверсный фон, накапливающий слой с часами работы, но это мелочь, потому что сотрудники обычно не работают в нерабочее время. - person polo7; 01.05.2018
comment
@ polo7 без проблем, если ответ помог вам, не забудьте пометить его как принятый - спасибо - person ADyson; 01.05.2018
comment
@ EPurpl3 Ну, это зависит от вашего точного определения не работает. Что у вас пошло не так? Вот демонстрация использования v4 с представлением временной шкалы: codepen.io/ADyson82/pen/ Единственное изменение данных - это добавление идентификатора ресурса (который необходим, иначе события не могут быть отображены на временной шкале, так как он не будет знать, на какой ресурс их поместить). Единственное изменение результата состоит в том, что в самом событии используется значение color, а не белый цвет. Не знаю, намеренно ли это. В документации по фоновым событиям не говорится, поддерживаются ли представления временной шкалы явно или нет. - person ADyson; 03.06.2019
comment
@ADyson классно, идентификатор ресурса сделал свое дело. Не знаю, как я об этом не подумал, я использую идентификатор ресурса для каждого события, но не использовал его для этих фоновых событий. Теперь отлично работает, спасибо. - person EPurpl3; 04.06.2019