how to change background for each called month in calendar

i'm using the semantic calendar from https://fullcalendar.io and i am trying to have the background for each month change. i have not been able to find how to do this as the code looks like it calls them up via math calculations. is there a way to add javascript to look for the info in the h2 code and compare it, if it's january XXXX then background is background.png?

here is the calendar being called in html, as you cann see it;s just calling the js function so i cant alter anything here

 <div id='calendar' style="background-image: url('assets/images/pgs/month01.png'); background-size: 100%; background-repeat: no-repeat; width: 81.5%;  z-index: 8; position:relative; float: right;"></div>

this is the code on the page inspect after it's run:

<h2 class="fc-toolbar-title" id="fc-dom-1">January 2024</h2>

maybe the js is editable but i think it's best to just add a new script on the html page that reads the info ad changes it that way?

i think this is part of the js that calls the month:

function Tl(e,t){for(let n in e)console.warn(Unknown option '${n}'+(t? for view '${t}':""))}class _l extends Xn{render(){return g("div",{className:"fc-toolbar-chunk"},...this.props.widgetGroups.map(e=>this.renderWidgetGroup(e)))}renderWidgetGroup(e){let{props:t}=this,{theme:n}=this.context,r=[],i=!0;for(let s of e){let{buttonName:e,buttonClick:o,buttonText:l,buttonIcon:a,buttonHint:c}=s;if("title"===e)i=!1,r.push(g("h2",{className:"fc-toolbar-title",id:t.titleId},t.title));else{let i=e===t.activeButton,s=!t.isTodayEnabled&&"today"===e||!t.isPrevEnabled&&"prev"===e||!t.isNextEnabled&&"next"===e,d=[fc-${e}-button,n.getClass("button")];i&&d.push(n.getClass("buttonActive")),r.push(g("button",{type:"button",title:"function"==typeof c?c(t.navUnit):c,disabled:s,"aria-pressed":i,className:d.join(" "),onClick:o},l||(a?g("span",{className:a,role:"img"}):"")))}}if(r.length>1){return g("div",{className:i&&n.getClass("buttonGroup")||""},...r)}return r[0]}}

so if anyone can help, i'm drawing a blank on how to call the function to look at the title and then change the background for it. maybe an array would work? i'm just lost atm, any help would be great.

Solution

This should work with a Mutation Observer. You can watch for changes to the DOM tree inside the div with the calendar. After a change you can extract the Headline and call a function to apply a style to the div. I only changed the bg color, but putting in an image follows the same principle.

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

// 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 = {December: "red", January: "blue", February: "cyan"}; // extend the object to cover every month, for images provide urls instead of colors
  calendarDivNode.style.backgroundColor = colors[month];
}

I tried this solution in this codepen.