Calendar plugin hide certain Add New Event floating button

[zibrahim]

Good day friends,
I need some help with hiding certain Add New Event floating button in the Calendar plugin.
As attached below, I need to hide the GREEN plus button but leaving the RED and YELLOW appear.

Screen Shot 2020-07-19 at 10.58.49 AM.png (117.66 KiB) Viewed 3608 times

Any help is appreciated.
Thank you and have a nice day.

Zala.

[zibrahim]

Just to follow up with this issue...
I managed to hide it with the following code in the browser inspector console.

Code: Select all

document.querySelector('[title="New service completed"]').hide();

However, I don’t have any idea where should I put this code.
Any help is appreciated. Thanks.

Zala.

[a.gneady]

You could add it to the hooks/footer-extras.php file like so:

Code: Select all

<script>
	document.querySelector('[title="New service completed"]').hide();
</script>

[zibrahim]

Hi Ahmed,
Tried that but it didn't work as expected.
Please help. Thanks.

[zibrahim]

Hi Ahmed,
Tried that but it didn't work as expected.
Please help. Thanks.

Just to add error info in the console

Uncaught TypeError: document.querySelector(...) is null

I hope this will help.... Thanks

[zibrahim]

With the help from Pascal aka pböttcher, I would like to share the solution for this issue.

Add the following to the hooks/header-extras.php

Code: Select all

<?php
$tablename=basename($_SERVER['PHP_SELF']);
$pos=strpos($tablename,'calendar');
if ( $pos !== FALSE && $pos == 0) { 
?>
<script>
// set up the mutation observer
var observer = new MutationObserver(function (mutations, me) {
    var arr=['[title="New date2"]'];   // specify which button to hide
    var elem=[];
    arr.forEach((entry) => {
        if (document.querySelector(''+entry+'') && $j(entry).css('display') != 'none') {
            elem.push(document.querySelector(''+entry+''));
            arr.splice(arr.indexOf(entry),1);
        }
    });
    if (elem.length != 0) {
        elem.forEach((element) => element.hide());
        if (arr.length == 0) me.disconnect(); // stop observing
        return;
    }
});
// start observing
observer.observe(document, {
  childList: true,
  subtree: true
});
</script>
<?php
}

in the arr
arr=['[title="New date2"]'];
you can specify the search for the buttons you want to hide. If you have multiple, use e.g.
arr=['[title="New date2"]', '[title="New date3"]'];
To get the button title, just hover your mouse pointer on the button and copy exactly what you see.

Thank you so much pböttcher.