Is it possible to have an event posterboard button simply open the posterboard?

Ask the Community Customization
1

On the posterboard layout you can add a button which is great. But the options for each event are open link (so assumed to be a third-party website), phone, or email.
Most of our events do link to third-party sites BUT for consistency, can we have a fourth option where the button simply opens that event’s modal (like clicking anywhere else does)?

maf.ca/events you will see our events - all but the one for a Fly-in on May 23 the button goes somewhere else but for that one I just want it to open the modal

3

Hi there, @user1359 :waving_hand:

We’ve added this script to the Custom JS field on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) => new Promise(res => {
    const observer = new MutationObserver(() => {
        const element = root.querySelector(selector);
        if (element) {
            res(element);
            observer.disconnect();
        }
    });

    observer.observe(root, { childList: true, subtree: true });
});

waitForElement('.eapp-events-calendar-grid-item-container').then(() => {
  const buttonBases = document.querySelectorAll('.es-button-base-ellipsis');
  const targetButtonSpan = [...buttonBases].find(buttonBase => buttonBase.textContent.toLowerCase().includes('learn more'));
  const targetButton = targetButtonSpan.closest('button');
  if (!targetButton) {
    return;
  }

  targetButton.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();

    targetButton.closest('.eapp-events-calendar-grid-item-component').click();
  });
});

Please check your website and let me know if you like the result :slightly_smiling_face:

4

This is awesome, Max.
Works Great.
Now for the bonus round - is there anyway to supress the LEARN MORE button found within the modal iteself?
Again, for other events this would lead to a ticketing agent or other such, but in this case it doesn’t do anything because the original button on the poster board opens the modal and so this one is mirroring that and with the modal open and all, it appears to do nothing.

5

Hi there, @user1359 :waving_hand:

Please let me check it with the devs. I’ll report back as soon as I have their response :slightly_smiling_face:

6

Hi there, @user1359 :waving_hand:

Thank you for waiting!

To hide the Learn More button from the popup, please add this code to the Custom CSS field on the Style tab of your widget’s settings:

@external {
  .eapp-events-calendar-modal-modal:has([src$="/23d42b7a-8a62-493f-8808-317aba7f7c45/WALL-AIR-EVENTS-POSTERBOARD.jpg"]) .eapp-events-calendar-button-link {
    display: none;
  }
}

To hide the button from Wall Air Drive-In event popup only, we’ve added an image link to the code:

image
image607×122 5.11 KB


If you decide to update an image, you’ll need to update the image link in the code as well.

Please check it out and let me know if it helped