1

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

我试图找出这里解释的解决方案：[ Fullcalendar - 根据值更改事件颜色..

但是，每次搜索“是”这个词是 TRUE 时，我都会在 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');
            }
        },
4

1 回答 1

5

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

  eventRender: function(info) {
        if(-1 != info.event.title.indexOf("Accomp")) {
            info.el.style.backgroundColor  = "red";
        }
    },
于 2019-04-22T16:01:36.233 回答