this calendar will be the death of me. the events now dissappear when i alter the background div to change with the month name. i've narrowed it down to the line between the called images and the image style code: literally the }; line. i have tried changing everything anf it will not have both the events and background image show at that same time.
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];
can someone please help me either have static events that i have to code for the calendar or fix it so the events and the background show up at the same time?
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'
}));
});<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 -->There are a couple of issues with your current script:
You're initialising the calendar twice - the first time with events in it, and then a second time without any events. Since you attached both calendar instances to the same HTML element, the second one directly overwrites the first, which is why your events don't show up. It's unclear why you added the second initialisation - it's not needed as far as I can see, so you can simply remove it.
Your calendar is initialised to a fixed date - 2024-01-12, but your initial call to changeBackground (when the calendar is first loaded) uses today's date instead. So that means that - apart from when "today" happens to be in January - you'll get the wrong background when you first load the calendar. You can correct that by putting the initial date value into a variable which is passed both to fullcalendar and to populate the Date object in the first changeBackground call.
I've corrected both of these in the runnable demo script below. I also merged your two DOMContentLoaded blocks into one - while this has no real functional impact, having two blocks of code which do the exact same job is just clutter.
N.B. Since I don't have your background colour image files for the demonstration, I've added a temporary command: onsole.log(calendarBackgroundNode.style.backgroundImage);, just to prove that the code is selecting the correct background image when the month is changed on the calendar.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var initDate = '2024-01-12';
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialDate: initDate,
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();
// 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];
console.log(calendarBackgroundNode.style.backgroundImage);
calendarBackgroundNode.style.backgroundRepeat = "no-repeat";
calendarBackgroundNode.style.backgroundSize = "100%";
calendarBackgroundNode.style.backgroundPosition = "right";
}
changeBackground(new Date(initDate).toLocaleString('default', {
month: 'long'
}));
});<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 -->
</div>