Event Calendar: How to skip eventless months and display months with events (Month layout)

Pro Tips Elfsight Widgets Tips
1

If there are no events in the current month, but you want to showcase the month with events, we’ve got a solution!

Our devs have come up with a custom script that identifies which month in the calendar has events and switches to that month.

Here is the script you need to add right after the widget installation code:

<script>
window.onload = () => {
			let eventsInCalendar = 0;
	const myInterval = setInterval(() => {
		const calendar = document.getElementsByClassName('fc-daygrid-day');
		let eventInTheCurrentMonth = false;
		for(let i = 0; i < calendar.length; i++) {
			let month = calendar[13].getAttribute('data-date').split('-')[1];
			let currentEventMonth = calendar[i].getAttribute('data-date').split('-')[1];
			eventInTheCurrentMonth = month == currentEventMonth;

			if(calendar[i].innerHTML.includes('fc-event-start') == 1 && eventInTheCurrentMonth) {
				eventsInCalendar++;
			}
		}
		
		if (eventsInCalendar == 0) {
			const buttonNext = document.querySelector('[class*="next-button"]');
			buttonNext.click();
			
		} else {
			clearInterval(myInterval);	
		}

	}, 300)
}
</script>

Note: This script works only for Month layout


Have questions or need assistance? Share your use case in the comments and we’ll gladly assist :slightly_smiling_face:

1 Like