Set events to be auto-removed in advance

We have tickets to events that must be purchased 24 hours in advanced. Is there a way to have the Event be removed from the calendar 24 hours in advance of the event vs at the time of the event.

1 Like

Hi @WhiteOak_Lavender :wave:

I’ve shared your request with the dev team. They’ll check things for you and I’ll let you know if it’s feasible :slightly_smiling_face:

Hi there @WhiteOak_Lavender :wave:

We’ve added this code to the Custom JS field on the Settings tab of your widget’s settings, so the needed events will be removed 24 hours before the event start time:

function waitForElem(selector) {
	return 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,
		});
	});
}
const MS_IN_DAY = 86400000;
const TIMEZONE = 'UTC-4';

const isExpired = (event) => {
	const m = event.querySelector(
		'.eapp-events-calendar-date-element-start .eapp-events-calendar-date-element-month'
	)?.textContent;
	const d = event.querySelector(
		'.eapp-events-calendar-date-element-start .eapp-events-calendar-date-element-day'
	)?.textContent;
	const t = event
		.querySelector('.eapp-events-calendar-time-time')
		?.textContent.replace(/-.+/, '');
	const y = event
		.closest('.eapp-events-calendar-grid-group')
		?.querySelector('.eapp-events-calendar-date-element-item')
		?.textContent?.replace?.(/\D/g, '');

	if (!m || !d || !t || !y) {
		return false;
	}
	const startTime = Date.parse(`${d} ${m} ${y} ${t} ${TIMEZONE}`);

	return startTime - Date.now() <= MS_IN_DAY;
};

waitForElem('.eapp-events-calendar-grid-item').then(() => {
	const hideExpiredEvents = () => {
		const events = document.querySelectorAll('.eapp-events-calendar-grid-item');
		const regexp = /must be purchased 24 hours in advance/i;

		events.forEach((e) => {
			const btnCaption = e.querySelector(
				'.eapp-events-calendar-button-element-caption'
			);

			e.style.display =
				btnCaption && regexp.test(btnCaption.textContent) && isExpired(e) ? 
				'none' : 
				'block';
		});

		const groupContent = document.querySelectorAll(
			'.eapp-events-calendar-grid-group .eapp-events-calendar-grid-component'
		);
		groupContent.forEach((c) => {
			const hasEvents = ![...c.children].every(
				(event) => event.style.display === 'none'
			);
			const group = c.closest('.eapp-events-calendar-grid-group');

			if (!group) {
				return;
			}
			group.style.display = hasEvents ? 'block' : 'none';
		});
	};
	hideExpiredEvents();

	document.addEventListener('click', (e) => {
		if (e.target.closest('.eapp-events-calendar-filter-item')) {
			hideExpiredEvents();
		}
	});
});

Could you please check it and let me know how it works?