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

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: