Неработающие события при добавлении изменения фонового изображения в календаре ⇐ CSS

[Anonymous]

Этот календарь станет моей смертью.
События теперь исчезают, когда я изменяю фоновый элемент div, чтобы он менялся в зависимости от названия месяца. я сузил его до линии между вызываемыми изображениями и кодом стиля изображения: буквально }; линия. Я пробовал все изменить, но события и фоновое изображение не отображаются одновременно.

Код: Выделить всё

   November: "url('assets/images/pgs/month11.png')",
December: "url('assets/images/pgs/month12.png')"
}; 

calendarBackgroundNode.style.backgroundImage = colors[month];

может ли кто-нибудь помочь мне либо создать статические события, которые мне нужно закодировать для календаря, либо исправить это, чтобы события и фон отображались одновременно?

Код: Выделить всё

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

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-calendar