Изменить цвет фона на основе названия события Fullcalendar 4 - PullRequest
Новая
       21

Изменить цвет фона на основе названия события Fullcalendar 4

1 голос
/ 22 апреля 2019

Я пытаюсь изменить цвет фона события (в режиме просмотра дня) в fullcalendar v4. Я часами пытался реализовать eventRender, но безрезультатно. Это привело меня к поиску других обходных путей, но теперь я вычеркиваю!

Я пытаюсь выяснить решение, объясненное здесь: [ Fullcalendar - изменить цвет события на основе значения ..

Но каждый раз, когда поиск слова «да» имеет значение ИСТИНА, я получаю сообщение об ошибке в консоли Chrome, в котором говорится «Ошибка анализа JSON». Если я изменю поисковый запрос на что-то, что создаст «ложь», я не получу эту ошибку. Для меня это означает, что поиск работает, но функция рендеринга событий как-то не работает.

мой код: 

    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
  defaultView: 'resourceTimeGridDay',
  defaultDate: '<?php echo $startdate?>',
  validRange: {
    start: '<?php echo $startdate?>',
    end: '<?php echo $maxdaycal?>'
    },
  height: 700,

...    
...

eventSources: [
            {
            url: 'getevents2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
            cache: false,
            },
            {
            url: 'getbreaks2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
            cache: false,
            color: 'grey',
            editable: false,
            }            
        ],
eventRender: function(info) {
      if(info.event.extendedProps.desc == "yes") {
      element.style.css('background-color', '#000');
      }
},
....
    });

calendar.render();


});

Моя цель: найдите слово «Accomp» в названии элемента (вероятно, в info.event.title) .. и измените цвет фона на другой, например, красный ... или что-то в этом роде.

Я также пытался показать значок в этом поле, если присутствует слово Accomp, но - мне пришлось показать его модально, потому что я не смог заставить eventrender показать html.

Я думаю, что это из-за различий в FC v4 ... но я не уверен.

Я также пытался: [ Можно ли назначить цвет фона события FullCalendar на основе его заголовка? .. но я также не смог разобраться с этим.

ОБНОВЛЕНИЕ : функция поиска работает, как я вижу это в журнале консоли, но всякий раз, когда я пытаюсь установить css, календарь не отображается. 

          eventRender: function(info) {
          console.log(info.event.title);
            if(-1 != info.event.title.indexOf("Accomp")) {
            console.log(info.event.title);
                fc-title.css('background-color', '#000');
            }
        },

1 Ответ

1 голос
/ 22 апреля 2019

Это основано на некоторых других доступных ответах, но кажется, что есть различия в FC4 ... Это работает для меня! 

  eventRender: function(info) {
        if(-1 != info.event.title.indexOf("Accomp")) {
            info.el.style.backgroundColor  = "red";
        }
    },
...