Event Calendar Button to open SideBar Form

Ask the Community Customization
1

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
3

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
4

Works perfectly! Thank you so much!!

3 Likes
5

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
6

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
7

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
8

Thanks for the quick reply!

1 Like
9

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
10

It works indeed! Again, thank you!

2 Likes
11

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