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
Max
3
Happy to see you on our forum! Welcome, @user13819 
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 
2 Likes
Works perfectly! Thank you so much!!
3 Likes
Max
5
It’s my pleasure 
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
Max
7
Hi there, @user13819 
I am sorry about this inconvenience!
I’ve passed it on to the devs and will get back to you on Monday 
1 Like
Thanks for the quick reply!
1 Like
Max
9
Hi there, @user13819 
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 
1 Like
It works indeed! Again, thank you!
2 Likes
Max
11
Awesome, you’re always welcome 
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
- March Challenge: Share your results with Elfsight & win 3 FREE months!
2 Likes