根据事件标题更改背景颜色 Fullcalendar 4

Question

我正在尝试更改 fullcalendar v4 事件（在日视图中）的背景颜色。我花了数小时尝试实施 eventRender，但无济于事。这让我找到了其他解决方法，但现在，我要三振出局了！

我正在尝试找出此处解释的解决方案：[Fullcalendar - change event color based on value ..

但是，每次搜索单词 'yes' 时，我都会在 chrome 控制台中收到一条错误消息，提示 'Failure parsing JSON'。如果我将搜索查询更改为将创建 'false' 的内容，我不会收到此错误。对我来说，这意味着搜索正在运行，但事件渲染功能不知何故失败了。

我的代码：

    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 的差异..但我不确定。

我也尝试过：[ .. 但我也无法解决这个问题。

UPDATE：搜索功能正在运行，正如我在控制台日志中看到的那样，但是每当我尝试设置 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');
            }
        },

Answer 1

这是基于其他一些可用的答案，但在 FC4 中似乎存在差异...这对我有用！

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

根据事件标题更改背景颜色 Fullcalendar 4

Change background color based on event title Fullcalendar 4

fullcalendar

fullcalendar-scheduler

fullcalendar-4