Question

我正在尝试更改全日历v4事件的背景颜色（在“日视图”中）。我花了几个小时尝试实现eventRender，但无济于事。这使我找到了其他解决方法，但是现在，我很出色！

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

但是，每次搜索单词“ yes”为TRUE时，我在chrome控制台中都会收到一条错误消息，提示“无法解析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的差异..但我不确定。

我也尝试过：[Is it possible to assign the background colour of a FullCalendar event based on its title? ..但我也无法解决这个问题。

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

1 个答案: