Event Calendar Date size, and Image size

Ask the Community Customization
1

  • Issue description: Is there a way to move the date on the calendar to where it doesn’t cover my event image?

  • Is there away to auto fit the image? Currently, it is cutting off some of the images on the right side.

  • Link to the page with the widget in question: Blue Ghost Events

2 Likes
3

Hi there, @Back_Office and welcome aboard :waving_hand:

To fix the image cropping issue, please use this code in the Custom CSS field on the Style tab of your widget’s settings:

.eapp-events-calendar-grid-item-imageContainer img {
  object-fit: contain;
}

After adding this code, there will be some padding above the image container. To remove it, please use one more CSS code:

.eapp-events-calendar-grid-item-imageContainer {
    margin-top: -37px!important;
}

As for the date display, could you please specify the exact place where you’d like to move it?

1 Like
4

Thanks for the response. As for the date placement, by the title. So it is not covering the image

2 Likes
5

Got it, thanks!

I’ve forwarded your request to the devs and will get back to you tomorrow :slightly_smiling_face:

1 Like
6

Hi @Back_Office :waving_hand:

To display the date next to the event title, we’ve added this script to the Custom JS field on the Settings tab of your widget’s settings:

const processCard = (card) => {
	if (card.dataset.processed) return;
	card.dataset.processed = 'true';

	const newTitleComponent = document.createElement('div');

	const dateComponent = card.querySelector(
		'.eapp-events-calendar-date-element-component'
	);
	const nameComponent = card.querySelector(
		'.eapp-events-calendar-name-component'
	);
	const itemInfoComponent = card.querySelector(
		'.eapp-events-calendar-grid-item-info'
	);

	if (!dateComponent || !nameComponent || !itemInfoComponent) return;

	newTitleComponent.appendChild(dateComponent);
	newTitleComponent.appendChild(nameComponent);

	nameComponent.style.margin = '0';
	newTitleComponent.style.display = 'flex';
	newTitleComponent.style.gap = '5px';
	dateComponent.style.position = 'relative';
	dateComponent.style.height = 'fit-content';
	dateComponent.style.marginLeft = '-30px';

	itemInfoComponent.insertAdjacentElement('afterbegin', newTitleComponent);
};

const observeAndProcessCards = (selector, root = document) => {
	document.querySelectorAll(selector).forEach(processCard);

	const observer = new MutationObserver((mutations) => {
		mutations.forEach((mutation) => {
			mutation.addedNodes.forEach((node) => {
				if (!(node instanceof HTMLElement)) return;

				if (node.matches(selector)) {
					processCard(node);
				}

				node.querySelectorAll?.(selector).forEach(processCard);
			});
		});
	});

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

observeAndProcessCards(
	'.elfsight-app-4b818a57-fc60-4f54-b9e5-87d7741e792f .eapp-events-calendar-grid-item-component'
);

Please check it out and let me know if you like the result :slightly_smiling_face:

1 Like
7

Thanks Max. I am not seeing any difference. Here is a rough mockup of what I am hoping to do.

koh2
koh2335×546 101 KB

1 Like
8

oh wait. I just got on the website, and it is working there! For some reason, it wasn’t showing on the preview! Thanks again! We are good!

2 Likes
9

Yep, the JS codes don’t work in the editor, only on the live website.

Glad to know it’s working fine! If anything else comes up, we’re always here to help :wink:

2 Likes