Event Calendar Button to open SideBar Form

Hi! First of all, Thank you for your great work! I’ve been looking through this forum for a few issues and you guys are doing incredible work!

I want to open the side bar form from the form builder with the default button in the Event Calendar App.

I already managed to create a custom button from scratch to open the Form. But I can’t figure out how to do it with the button in the Event Calendar.

Page with issue:
https://atelierduchef.com/demonstrations

Thank you!

3 Likes

Happy to see you on our forum! Welcome, @user13819 :wave:

Our devs came up with a custom solution for you. This code was added to the Custom CSS field on the Appearance tab of your Form widget’s settings:

[class*="Pane__PaneContent-sc"] {
  z-index: 2000000001 !important;
}

And this code was placed in the Custom JS field on the Settings tab of your Event Calendar widget’s settings:


const TARGET_BUTTON_TEXT = 'Inscription';

function isTargetButton(button) {
  return (
    button?.textContent.trim().toLowerCase() ===
    TARGET_BUTTON_TEXT.toLowerCase()
  );
}

document.addEventListener('click', (e) => {
  const button = e.target?.closest('.eapp-events-calendar-button-component');
  if (!isTargetButton(button)) return;

  const formButton = document.querySelector(
    '[class*="FloatingButton__FloatingButtonContainer-sc"] button'
  );
  if (formButton && isTargetButton(formButton)) {
    formButton.click();
  }
});

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

2 Likes

Works perfectly! Thank you so much!!

3 Likes

It’s my pleasure :slightly_smiling_face:

In the meantime, we’d be so grateful if you could look through the Event Calendar category on the Wishlist and upvote the ideas you like most.

Your feedback is incredibly helpful for settings the priorities right!

2 Likes

Hi @Max , we just noticed the code you developed for this feature no longer works. Any chance you could help?
Thank you so much!

1 Like

Hi there, @user13819 :wave:

I am sorry about this inconvenience!

I’ve passed it on to the devs and will get back to you on Monday :slightly_smiling_face:

1 Like

Thanks for the quick reply!

1 Like

Hi there, @user13819 :wave:

We’ve adjusted the Custom JS code and now the button is working as expected:

const TARGET_BUTTON_TEXT = 'Inscription';

function isTargetButton(button) {
  function normalizeString(str = '') {
    return str.trim().toLowerCase();
  }

  return (
    normalizeString(button?.textContent) === normalizeString(TARGET_BUTTON_TEXT)
  );
}

document.addEventListener(
  'click',
  (e) => {
    const button = e.target?.closest('.eapp-events-calendar-button-component');
    if (!isTargetButton(button)) return;

    const formButton = document.querySelector(
      '[class*="FloatingButton__FloatingButtonContainer-sc"] button'
    );
    if (formButton && isTargetButton(formButton)) {
      formButton.click();
    }
  },
  true
);

Please check your website and let me know if everything is fine now :slightly_smiling_face:

1 Like

It works indeed! Again, thank you!

2 Likes

Awesome, you’re always welcome :wink:

In the meantime, we’d like to invite you to join our new challenge, where you can win 3 FREE months for your subscription. Check the details and participate :wink: - March Challenge: Share your results with Elfsight & win 3 FREE months!:rocket:

2 Likes