使用完整的日历功能在事件框中设置每种不同的颜色

Question

我在设置完整日历功能中每个事件框的颜色时遇到问题。目前，我只能在 fc-daygrid-event-dot 中设置。请问如何设置每个事件框的背景颜色？

下面是我的代码：

 document.addEventListener('DOMContentLoaded', function() {
    // titleFormat: 'MMMM D, YYYY' 
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      initialDate: '2021-04-25',
      navLinks: true, // can click day/week names to navigate views
      selectable: true,
      selectMirror: true,
      
      
      select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
      eventClick: function(arg) {
        if (confirm('Are you sure you want to delete this event?')) {
          arg.event.remove()
        }
      },
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: <?php echo json_encode($myArray); ?>
    });
    calendar.render();   
  });

这是我的json_encode($myArray); 数据：

[{"title":"All Day Event","start":"2016-01-01 00:00:00","color":"#40E0D0"},{"title":"Long Event","start":"2016-01-07 00:00:00","color":"#FF0000"},{"title":"Repeating Event","start":"2016-01-09 16:00:00","color":"#0071c5"},{"title":"Conference","start":"2016-01-11 00:00:00","color":"#40E0D0"},{"title":"Meeting","start":"2016-01-12 10:30:00","color":"#000"},{"title":"Lunch","start":"2016-01-12 12:00:00","color":"#0071c5"},{"title":"Happy Hour","start":"2016-01-12 17:30:00","color":"#0071c5"},{"title":"Dinner","start":"2016-01-12 20:00:00","color":"#0071c5"},{"title":"Birthday Party","start":"2016-01-14 07:00:00","color":"#FFD700"},{"title":"Double click to change","start":"2016-01-28 00:00:00","color":"#008000"},{"title":"13245132","start":"2021-03-31 00:00:00","color":"undefin"},{"title":"asfsa","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"52115","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"624","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"512","start":"2021-04-04 00:00:00","color":"#FF0000"},{"title":"21512","start":"2021-04-06 00:00:00","color":"#FF0000"},{"title":"236234","start":"2021-04-07 00:00:00","color":"#FF0000"},{"title":"3521","start":"2021-04-03 00:00:00","color":"#00FF00"},{"title":"HHH","start":"2021-04-02 00:00:00","color":"#FFFF00"},{"title":"test","start":"2021-03-30 00:00:00","color":"#378006"},{"title":"asfsa","start":"2021-03-28 00:00:00","color":"#378006"},{"title":"ok","start":"2021-03-29 00:00:00","color":"#378006"},{"title":"ok","start":"2021-04-01 00:00:00","color":"#378006"},{"title":"ok","start":"2021-03-31 00:00:00","color":"#378006"},{"title":"555","start":"2021-04-16 00:00:00","color":"#378006"},{"title":"asfsa","start":"2021-03-28 00:00:00","color":"#FF0000"}]

现在我的结果如下图，每种颜色都可以显示在点中：

实际上，我想要示例图片下方的预期结果：

我试过的： i）我尝试将json_encode($myArray);数据中的颜色改为背景色，但还是不行。

斯瓦蒂结果：

Answer 1

您的数据包含每个事件的“颜色”键。 为了实现您的需要，您可以设置“backgroundColor”键，它设置事件的颜色。请看这里的文档：https://fullcalendar.io/docs/event-object

    {[{"title":"All Day Event","backgroundColor": "yellow", "start":"2016-01-01 00:00:00","color":"#40E0D0"}...]

有关工作示例，请访问working example

Answer 2

您可以在其中使用eventDidMount 事件，您可以使用.each 循环遍历您的json 数组，然后我们需要获取添加事件的td。

现在，如果您查看动态生成的td，您会发现data-date 属性，因此请使用此属性，然后在同一日期可以有两个或更多事件，因此您可以使用json 数组中的title 键并检查此值fc-event-title div 里面是不是最后使用 .closest(".fc-daygrid-event-harness") 并更改该 div 的背景颜色。

演示代码：

//suppose this is array
var arrays = [{
  "title": "All Day Event",
  "start": "2016-01-01 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Long Event",
  "start": "2016-01-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "Repeating Event",
  "start": "2016-01-09 16:00:00",
  "color": "#0071c5"
}, {
  "title": "Conference",
  "start": "2016-01-11 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Meeting",
  "start": "2016-01-12 10:30:00",
  "color": "#000"
}, {
  "title": "Lunch",
  "start": "2016-01-12 12:00:00",
  "color": "#0071c5"
}, {
  "title": "Happy Hour",
  "start": "2016-01-12 17:30:00",
  "color": "#0071c5"
}, {
  "title": "Dinner",
  "start": "2016-01-12 20:00:00",
  "color": "#0071c5"
}, {
  "title": "Birthday Party",
  "start": "2016-01-14 07:00:00",
  "color": "#FFD700"
}, {
  "title": "Double click to change",
  "start": "2016-01-28 00:00:00",
  "color": "#008000"
}, {
  "title": "512",
  "start": "2021-04-04 00:00:00",
  "color": "#FF0000"
}, {
  "title": "21512",
  "start": "2021-04-06 00:00:00",
  "color": "#FF0000"
}, {
  "title": "236234",
  "start": "2021-04-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "3521",
  "start": "2021-04-03 00:00:00",
  "color": "#00FF00"
}, {
  "title": "HHH",
  "start": "2021-04-02 00:00:00",
  "color": "#FFFF00"
}, {
  "title": "test",
  "start": "2021-03-30 00:00:00",
  "color": "#378006"
}, {
  "title": "43",
  "start": "2021-03-28 00:00:00",
  "color": "#378006"
}, {
  "title": "ok",
  "start": "2021-03-29 00:00:00",
  "color": "#378006"
}, {
  "title": "o2k",
  "start": "2021-04-01 00:00:00",
  "color": "#378006"
}, {
  "title": "ok3",
  "start": "2021-03-31 00:00:00",
  "color": "#378006"
}, {
  "title": "5553",
  "start": "2021-04-16 00:00:00",
  "color": "#378006"
}, {
  "title": "asfsa",
  "start": "2021-03-28 00:00:00",
  "color": "#FF0000"
}]

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    initialDate: '2021-04-25',
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectMirror: true,
    eventDidMount: function(view) {
      //loop through json array
      $(arrays).each(function(i, val) {
        //find td->check if the title has same value-> get closest daygird ..change color there
        $("td[data-date=" + moment(val.start).format("YYYY-MM-DD") + "] .fc-event-title:contains(" + val.title + ")").closest(".fc-daygrid-event-harness").css("background-color", val.color);
      })
    },
    select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
    eventClick: function(arg) {
      if (confirm('Are you sure you want to delete this event?')) {
        arg.event.remove()
      }
    },
    editable: true,
    dayMaxEvents: true,
    events: arrays //pass array here
  });

  calendar.render();


});

.fc-event-title {
  color: white
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.6.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.6.0/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div id='calendar'></div>