MySQL 标题上的全日历事件颜色

Question

我目前正在我的网站上运行 FullCalendar（V4？如果我确定这一点，那我就是在撒谎！），并且我正在尝试根据 MySQL 数据库中的事件标题动态更改颜色。我尝试了一些方法，并且已经达到了能够识别事件何时与我想要更改颜色的类型匹配的程度。然而，无论我尝试什么，我似乎都无法完全弄清楚实际日历上颜色的覆盖。

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
            nextDayThreshold: '00:00:00',
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            editable: false,
            navLinks: true, // can click day/week names to navigate views
            eventLimit: true, // allow "more" link when too many events
            displayEventEnd: {
                month: false,
                basicWeek: true,
                "default": true
            },
            eventTimeFormat: {
              hour: "numeric",
              minute: "2-digit",
              meridiem: "short",
          },

          eventRender: function(info) {
            if(info.event.title == "TitleToCompare") {
            backgroundColor: '#cecece'
            console.log(info.event.title);
        }
            var tooltip = new Tooltip(info.el, {
                title: info.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body',
            });
        },
        events: {
            url: 'privateEvents.php',
            failure: function() {
                document.getElementById('script-warning').style.display = 'block'
            }
        },
        loading: function(bool) {
            document.getElementById('loading').style.display =
            bool ? 'block' : 'none';
        }
    });

        calendar.render();
    });

我尝试过使用 eventColor、backgroundColor、eventBackgroundColor。我还尝试在这里使用不同的线程，该线程有一个向其添加 CSS 元素的解决方案，但它只是返回一个错误，而不是拒绝在任何事件中加载。

我在 FullCalendar 网站上看过很多文档，但似乎并没有完全涵盖这个场景......或者我是盲目的！

Answer 1

您必须在 privateEvents.php 文件中指定 color 键，该文件返回事件列表。

---

参考资料：

https://fullcalendar.io/docs/event-object

https://fullcalendar.io/docs/event-source-object

document.addEventListener('DOMContentLoaded', function() {
  new FullCalendar.Calendar(
    document.getElementById('calendar'), {
      initialView: 'timeGridDay',
      slotDuration: "00:15:00",
      events: [{
          id: 1,
          title: "Demo 1",
          color: "#DCFFB7",
          textColor: "#000",
          start: "2024-07-05T13:00:00",
          end: "2024-07-05T13:15:00"
        },
        {
          id: 2,
          title: "Demo 2",
          color: "#D9F2DB",
          textColor: "#000",
          start: "2024-07-05T13:15:00",
          end: "2024-07-05T13:30:00"
        },
        {
          id: 3,
          title: "Demo 3",
          color: "#F7A774",
          textColor: "#FFF",
          start: "2024-07-05T13:30:00",
          end: "2024-07-05T13:45:00"
        },
        {
          id: 4,
          title: "Demo 1",
          color: "#DCFFB7",
          textColor: "#000",
          start: "2024-07-05T14:00:00",
          end: "2024-07-05T14:15:00"
        },
        {
          id: 5,
          title: "Demo 2",
          color: "#D9F2DB",
          textColor: "#000",
          start: "2024-07-05T14:15:00",
          end: "2024-07-05T14:30:00"
        },
        {
          id: 6,
          title: "Demo 3",
          color: "#F7A774",
          textColor: "#FFF",
          start: "2024-07-05T14:30:00",
          end: "2024-07-05T14:45:00"
        }
      ]
    }
  ).render();
});

<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<div id='calendar'></div>