Remove the Calendar Icons from Event Detail page using JavaScript

Question

I want to remove the buttons in image below from the event detail page.

I was able to find a Jquery based solution which works when I put it in a custom button and click on it it hides the button.

{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')}
$("div").remove(".calendarHeaderBG, .calendarHeader");

I want this to happen automatically thus when I use the same in an Inline VF Page it doesnt hide the buttons.

Here is the Inline VF Page Code

<apex:page standardController="Event" >
    <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        alert('Check 1');
        $("div").remove(".calendarHeaderBG, .calendarHeader");
        alert('Check 2');
    </script>
</apex:page>

Here alert "Check 2" is not firing which means somewhere JS is failing.

Any help will be highly appreciated.

Thank You.

Answer 1

I would offer you to use apex:detail as your solution.Below is the code example

<apex:page standardController="Event">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    ReadyFunc();
});
function ReadyFunc(){
    var a = $('[value$=pections]').first().attr('onclick');
    $('[value$=pections]').first().attr('onclick','ShowPopup();'+a);
}

<apex:detail relatedList="true" inlineEdit="true" relatedListHover="true" oncomplete="ReadyFunc();"/>
</apex:page>

You can do anything you want inside ypur document ready function automatically.

more information about : apex:detail

SOLUTION: apex:detail for event object doesnt display these buttons thus no JS needed at all, just replace standard page with apex:detail of a VF Page