Conditionally Hide Fields In Calendar Datapage

[kpcollier]

I've looked through a few of the different 'Hide a Field' posts in here, but I couldn't get them to work on my Calendar Datapage. 

I have an HTML block on my Calendar section records. Depending on what the calculated field value is, I want to either hide or show the 'Join' button. If calcfield1 = 'ASSISTANT SCHEDULED', I want the Join button to be hidden. Otherwise, if it is 'HELP REQUESTED', I want to show it. 

I don't get any errors. I just can't get anything to hide. 

<a id="joinIn" href="#">Join</a>
<p id="joinIn2">[@calcfield:1]</p>

<script>
document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1 == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});
</script>

[TellMeWhy]

49 minutes ago, kpcollier said:

I've looked through a few of the different 'Hide a Field' posts in here, but I couldn't get them to work on my Calendar Datapage. 

I have an HTML block on my Calendar section records. Depending on what the calculated field value is, I want to either hide or show the 'Join' button. If calcfield1 = 'ASSISTANT SCHEDULED', I want the Join button to be hidden. Otherwise, if it is 'HELP REQUESTED', I want to show it. 

I don't get any errors. I just can't get anything to hide. 

<a id="joinIn" href="#">Join</a>
<p id="joinIn2">[@calcfield:1]</p>

<script>
document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1 == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});
</script>

you're lacking innerhtml field1.innerHTML == "ASSISTANT SCHEDULED"

if innerHTML does not work try innerText

[kpcollier]

5 minutes ago, TellMeWhy said:

if innerHTML does not work try innerText

Thanks for the reply. I gave both a try and the problem persists.

document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1.innerHTML == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});

 

[TellMeWhy]

1 hour ago, kpcollier said:

Thanks for the reply. I gave both a try and the problem persists.

document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1.innerHTML == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});

 

Ah, it's Calendar, so it should work the same as this https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

 

You need to use a unique field for the ID, just append different text for different elements

Here's an example: