Hey Max!
I just tried adding this script to my events to get the button on events imported through Google Calendar, but it doesn’t show a button for me.
2 Likes
Hi @toby_mathew 
Firstly, you should add a linked text to the event description in your Google Calendar:
After that, please try to use the CSS code above again and let me know if it worked 
1 Like
Hey Max!
Thank you SO much that was super helpful. Question is there anyway of having the button display on the right side similar to what its like when the event was added in manually?
2 Likes
I guess it’s possible.
I’ve shared your request with the devs and will update you tomorrow
1 Like
Hi @toby_mathew
I’ve talked with the devs, and they’ll try to customize the button’s position for you. I’ll update you once the solution is ready
1 Like
I appreciate that so much! Thank you for the help!
3 Likes
Hi there, @toby_mathew
It seems that you’ve removed the button from the widget. Could you please restore it, so that we could adjust its position?
1 Like
Apologies! I hid the description filter because all the boxes ended up being different sizes and that removed the button.
Question is there anyway of making each event box the same size and limit the number of characters that pulls from the description to like 150 characters?
2 Likes
Thanks! I’ll consult with the devs regarding the 2nd question and report back once I have their response
1 Like
Thanks so much for the update! Soooo…I’m having a weird issue haha…my website isn’t currently live but it looks like that CSS has changed all the CSS on my website and added a button to weird sections of my site:
2 Likes
Hi there, @toby_mathew
Ah, I am so sorry about that!
I’ve shared this issue with the devs and will get back to you with the revised solution.
1 Like
Thanks so much! Much appreciated Max.
3 Likes
This issue occurred because of .global-styles, selector in the CSS code, and we’ve replaced it with .eapp-events-calendar-list-item-description a. So, now everything is working fine!
Regarding your customization requests:
1. We’ve adjusted the position of the button by adding this code to the Custom CSS field on the Appearance tab of your widget’s settings:
.eapp-events-calendar-list-item-description {
width: 100%;
}
.eapp-events-calendar-list-item-description > div {
display: grid !important;
gap: 10px;
justify-content: space-between;
}
.eapp-events-calendar-list-item-description * {
grid-row: 1/2
}
.eapp-events-calendar-list-item-description a {
min-width: fit-content;
height: fit-content;
grid-column: 2/3
}
@media screen and (max-width: 640px) {
.eapp-events-calendar-list-item-description > div {
flex-direction: column !important
}
.eapp-events-calendar-list-item-description a {
grid-column: 1/2;
grid-row: 3/4 !important;
width: fit-content;
}
}
2. To make all event cards the same height, please add this code to the Custom CSS field:
.eapp-show-more-button {
display: block;
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
color: #000;
margin: 24px auto 0;
}
.eapp-show-more-button:hover {
text-decoration: underline;
}
And this script should be added to the Custom JS field on the Settings tab:
const MAX_HEIGHT = 95;
const WIDGET_SELECTOR = '#eapps-events-calendar-dbe484d6-1fe9-4fb4-ae13-2b2e3639dd1b';
const waitForElem = (selector) =>
new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(() => {
if (document.querySelector(selector)) {
observer.disconnect();
resolve(document.querySelector(selector));
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
waitForElem(`${WIDGET_SELECTOR} .eapp-events-calendar-list-item-component`).then(() => {
const widgetContainer = document.querySelector(WIDGET_SELECTOR)
const cards = document.querySelectorAll(
'.eapp-events-calendar-list-item-component'
);
function showAllText(node) {
node.style.maxHeight = 'none';
node.style.overflow = 'visible';
for (const child of node.children) {
showAllText(child);
}
}
function addEventsToButton(button, card, eventDescription) {
const titleOfCard = card.querySelector(
'.eapp-events-calendar-name-component'
);
button.addEventListener('click', (e) => {
e.stopPropagation();
showAllText(eventDescription);
button.style.display = 'none';
});
if (titleOfCard) {
button.addEventListener('mouseenter', () => {
titleOfCard.style.textDecoration = 'none';
});
button.addEventListener('mouseleave', () => {
titleOfCard.style.textDecoration = 'underline';
});
}
}
function createShowMoreButton() {
const button = document.createElement('button');
button.textContent = 'Show more';
button.classList.add('eapp-show-more-button');
return button;
}
function truncateByHeight(card, maxHeight) {
const eventDescription = card.querySelector(
'.eapp-events-calendar-list-item-description'
);
console.log(eventDescription)
if (!eventDescription) return;
if (eventDescription.scrollHeight > maxHeight) {
eventDescription.style.maxHeight = `${maxHeight}px`;
eventDescription.style.overflow = 'hidden';
const button = createShowMoreButton();
addEventsToButton(button, card, eventDescription);
eventDescription.insertAdjacentElement('afterend', button);
}
}
cards.forEach((card) => truncateByHeight(card, MAX_HEIGHT));
});
Give it a shot and let me know how it worked 
1 Like
Hey Max,
Sorry for the delayed response; you are a life saver. Thank you so much for taking care of this. So everything seemed to work except the custom JS Script. I seem to be getting some errors:
Line 24: Missing semicolon.
Line 71: Missing semicolon.
Line 24: ‘widgetContainer’ is defined but never used.
3 Likes
Hi @toby_mathew
Apologies for the inconvenience!
Our devs will double-check the code, and I’ll get back to you with the updated solution
1 Like
Thank you Max!
2 Likes
Hey Max!
Hope you are doing well - I just wanted to circle back to this and see if we had any updates.
2 Likes
Hi @toby_mathew
Apologies for the delayed response!
Our devs adjusted the JS code and the errors have been eliminated. Please check your widget and let me know if it’s fine now
1 Like
Hey Max!
I believe the script used was used to make each of the events the same height. Right now, they are all different depending on text but I was wondering if there was a way to make it look clean and consistent.
2 Likes
Hi @toby_mathew
This CSS code does it, but not the Custom JS script, is responsible for the height of the event cards:
.eapp-show-more-button {
display: block;
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
color: #000;
margin: 24px auto 0;
}
.eapp-show-more-button:hover {
text-decoration: underline;
}
It seems that you’ve changed the layout, that’s why the code stopped working. Please add this part to the Custom CSS field on the Appearance tab to align height of the cards in List layout:
.eapp-events-calendar-list-events {
display: grid;
grid-auto-rows: 1fr;
}
Try it out and let me know if it helped
1 Like