how can you change the background of an outer div after an observed event happens in the inner div?

i was thankfully helped in another post about changing the background of a div based on what month is called but i want it to change the container div rather than the calendar div itsself.

i tried modifying the code to observe the calendardivnode for the change but then alter the bgcontainerdivnode but its not working.

can anyone please help? this is using the semantic calendar from Adam Shaw

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  });
  calendar.render();

  // 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 = {
      January: "url('https://placehold.co/600x400/orange/white')",
      February: "url('assets/images/pgs/month2.png')",
      March: "url('assets/images/pgs/month3.png')",
      April: "url('assets/images/pgs/month4.png')",
      May: "url('assets/images/pgs/month5.png')",
      June: "url('assets/images/pgs/months01.png')",
      July: "url('assets/images/pgs/months01.png')",
      August: "url('assets/images/pgs/months01.png')",
      September: "url('assets/images/pgs/months01.png')",
      October: "url('assets/images/pgs/months01.png')",
      November: "url('assets/images/pgs/months01.png')",
      December: "url('https://placehold.co/600x400/red/green')"
    };

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

  }
  changeBackground(Object.keys(new Date().getMonth()));
});

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

<!-- div bg container for calendar -->

<div class="bgcontainer">


  <div id='calendar'></div>

  <!-- end of div bg container for calendar -->


</div>

the div called bgcontainer needs changed rather than the calendar div but it listens and observes changes in the calendar div.

Solution

All you really need to do to make this work is just change the <div> you are setting the style tags on.

Also your initial call to changeBackground wasn't getting a valid value passed in - date.getMonth() returns an integer, so calling Object.keys on it didn't make much sense. I've fixed it so it gets the long month name of the current date.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  });
  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('https://placehold.co/600x400/orange/white')",
      February: "url('assets/images/pgs/month2.png')",
      March: "url('assets/images/pgs/month3.png')",
      April: "url('assets/images/pgs/month4.png')",
      May: "url('assets/images/pgs/month5.png')",
      June: "url('assets/images/pgs/months01.png')",
      July: "url('assets/images/pgs/months01.png')",
      August: "url('assets/images/pgs/months01.png')",
      September: "url('assets/images/pgs/months01.png')",
      October: "url('assets/images/pgs/months01.png')",
      November: "url('assets/images/pgs/months01.png')",
      December: "url('https://placehold.co/600x400/red/green')"
    };

    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@6.1.15/index.global.min.js'></script>

<!-- div bg container for calendar -->

<div id="background" class="bgcontainer">


  <div id='calendar'></div>

  <!-- end of div bg container for calendar -->


</div>