FullCalendar切换月份背景图时事件消失的问题求助

我快被这个日历搞疯了！现在只要我修改背景div来对应月份名称，日历里的事件就会消失。我已经把问题定位到图片配置和样式代码之间的那一行——就是那个};！我试了各种调整，就是没法同时让事件和背景图正常显示。

November: "url('assets/images/pgs/month11.png')",
  December: "url('assets/images/pgs/month12.png')"
}; <-- THIS IS THE ISSUE RIGHT HERE, THIS LINE -->

calendarBackgroundNode.style.backgroundImage = colors[month];

有没有大佬能帮帮我？要么让日历的事件变成静态的（我可以自己写代码配置），要么修复这个问题让事件和背景图能同时正常显示？

完整代码 #

JavaScript代码

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,listWeek'
    },

    initialDate: '2024-01-12',
    navLinks: true, // can click day/week names to navigate views
    nowIndicator: true,

    weekNumbers: true,
    weekNumberCalculation: 'ISO',

    editable: true,
    selectable: true,
    dayMaxEvents: true, // allow "more" link when too many events
    events: [{
        title: 'All Day Event',
        start: '2024-01-01'
      },
      {
        title: 'Long Event',
        start: '2024-01-07',
        end: '2024-01-10'
      },
      {
        groupId: 999,
        title: 'Repeating Event',
        start: '2024-01-09T16:00:00'
      },
      {
        groupId: 999,
        title: 'Repeating Event',
        start: '2024-01-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2024-01-11',
        end: '2024-01-13'
      },
      {
        title: 'Meeting',
        start: '2024-01-12T10:30:00',
        end: '2024-01-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2024-01-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2024-01-12T14:30:00'
      },
      {
        title: 'Happy Hour',
        start: '2024-01-12T17:30:00'
      },
      {
        title: 'Dinner',
        start: '2024-01-12T20:00:00'
      },
      {
        title: 'Birthday Party',
        start: '2024-01-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2024-01-28'
      }
    ]
  });

  calendar.render();
});

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,listWeek'
    },
  });

  calendar.render();

  // Select the node that will be observed for mutations
  const calendarDivNode = document.getElementById("calendar");

  //select the div which the style changes will be applied to
  const calendarBackgroundNode = document.getElementById("background");


  // Options for the observer (which mutations to observe)
  const config = {
    attributes: true,
    childList: true,
    subtree: true
  };

  // Callback function to execute when mutations are observed
  const callback = (mutationList, observer) => {
    let monthFromElement = document.getElementById("fc-dom-1").innerHTML;
    let month = monthFromElement.replace(/[0-9]/g, "").trim();
    changeBackground(month);
  };

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(calendarDivNode, config);

  // Function to change background
  function changeBackground(month) {
    const colors = {
      January: "url('assets/images/pgs/month01.png')",
      February: "url('assets/images/pgs/month02.png')",
      March: "url('assets/images/pgs/month03.png')",
      April: "url('assets/images/pgs/month04.png')",
      May: "url('assets/images/pgs/month05.png')",
      June: "url('assets/images/pgs/month06.png')",
      July: "url('assets/images/pgs/month07.png')",
      August: "url('assets/images/pgs/month08.png')",
      September: "url('assets/images/pgs/month09.png')",
      October: "url('assets/images/pgs/month10.png')",
      November: "url('assets/images/pgs/month11.png')",
      December: "url('assets/images/pgs/month12.png')"
    };

    calendarBackgroundNode.style.backgroundImage = colors[month];
    calendarBackgroundNode.style.backgroundRepeat = "no-repeat";
    calendarBackgroundNode.style.backgroundSize = "100%";
    calendarBackgroundNode.style.backgroundPosition = "right";

  }
  changeBackground(new Date().toLocaleString('default', {
    month: 'long'
  }));
});

HTML代码

<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
<!-- div bg container for calendar -->
<div id="background" class="bgcontainer">
  <div id='calendar'><br><br><br><br><br><br></div>
  <!-- end of div bg container for calendar -->

备注：内容来源于stack exchange，提问作者MachaNeko