querySelectorAll is not working on a calendar block

Hello All, I am trying to run a footer script to delete some elements from a Calendar block. For some reason querySelectorAll('item.item--ongoing') seems to be firing before the page fully loads even though I am checking for 'complete' ready state. When I run querySelectorAll in the browser console it picks them up so it's a loading issue.

Is there a way to wait longer for the script to run?

<script >
  (function () {
   if (window.NodeList && !NodeList.prototype.forEach) {
   	NodeList.prototype.forEach = Array.prototype.forEach;
  	}

    document.addEventListener('readystatechange', event => { 
    if (document.readyState === "complete") {
        init()
    }
    });
    
  function init() {
 	var monthlyEl = document.querySelectorAll('.item.item--ongoing');
    console.log('item--ongoing',monthlyEl.length)
    
   new MutationObserver(function() {
    init();
    // myFunction2(); , etc...
  }).observe(document.body, {attributes:true, attributeFilter:["class"]});
})();
</script>

On 4/7/2022 at 10:32 AM, evo99688 said:

Hello All, I am trying to run a footer script to delete some elements from a Calendar block. For some reason querySelectorAll('item.item--ongoing') seems to be firing before the page fully loads even though I am checking for 'complete' ready state. When I run querySelectorAll in the browser console it picks them up so it's a loading issue.

Is there a way to wait longer for the script to run?

<script >
  (function () {
   if (window.NodeList && !NodeList.prototype.forEach) {
   	NodeList.prototype.forEach = Array.prototype.forEach;
  	}

    document.addEventListener('readystatechange', event => { 
    if (document.readyState === "complete") {
        init()
    }
    });
    
  function init() {
 	var monthlyEl = document.querySelectorAll('.item.item--ongoing');
    console.log('item--ongoing',monthlyEl.length)
    
   new MutationObserver(function() {
    init();
    // myFunction2(); , etc...
  }).observe(document.body, {attributes:true, attributeFilter:["class"]});
})();
</script>

 

Can you share your site with the protected password so I can take a look?

I think calendar block use some form of lazy/just in time loading. You'll need to use a MutationObserver. MO's are designed to watch for things that change after the document ready state. Although the following code is not specific to your need you may be able to adapt it to your needs or use it as a guide.

calendar block end time remove.html