Display Month calendar on desktop, List on mobile

Ask the Community Customization
1

I’m currently using the Elfsight Event Calendar widget on our website and would like to configure the calendar so that it displays differently depending on the visitor’s device.

Ideally, I would like:

  • Desktop/Tablet: Display the traditional Month Calendar/Grid View
  • Mobile: Automatically switch to the List/Agenda View

Is there a way to configure the Event Calendar widget so that the view changes automatically based on screen size?

If this isn’t available through the standard widget settings, can it be accomplished with custom CSS, JavaScript, or another recommended method?

I’d appreciate any instructions or sample code you can provide.

3

Hi there, @Monmouth_Fish_Game :waving_hand:

To implement this functionality, you should replace the default installation code of the widget with the custom one:

<script>
	const WIDGET_ID = 'YOUR_WIDGET_ID';
	const MOBILE_LAYOUT = 'list';
	const MOBILE_BREAKPOINT = 680;
	if (
		!document.querySelector('script\[src="https://elfsightcdn.com/platform.js"\]')
	) {
		const script = document.createElement('script');
		script.src = 'https://elfsightcdn.com/platform.js';
		script.async = true;
		document.head.appendChild(script);
	}
	const widget = document.createElement('div');
	widget.className = \`elfsight-app-${WIDGET_ID}\`;
	widget.setAttribute('data-elfsight-app-lazy', '');
	if (window.innerWidth < MOBILE_BREAKPOINT) {
		widget.setAttribute('data-elfsight-app-layout', MOBILE_LAYOUT);
	}
	document.currentScript.after(widget);
</script>

Replace YOUR_WIDGET_ID in the 1st line of the code with the actual ID of your widget and add the resulted code to your website.

GIve it a try and let me know if it helped :slightly_smiling_face:

4

Thanks Max…but I’m getting this when I installing. Thoughts?

image
image572×672 44.8 KB

Unexpected:

image
image572×672 41.1 KB

5

Sorry for the oversight, some additional symbols have been added after pasting the code:

image
image569×369 23.5 KB


Please try to use this version and let me know how it worked:

<script>
	const WIDGET_ID = 'YOUR_WIDGET_ID';
	const MOBILE_LAYOUT = 'list';
	const MOBILE_BREAKPOINT = 600;
	if (
		!document.querySelector('script[src="https://elfsightcdn.com/platform.js"]')
	) {
		const script = document.createElement('script');
		script.src = 'https://elfsightcdn.com/platform.js';
		script.async = true;
		document.head.appendChild(script);
	}
	const widget = document.createElement('div');
	widget.className = `elfsight-app-${WIDGET_ID}`;
	widget.setAttribute('data-elfsight-app-lazy', '');
	if (window.innerWidth < MOBILE_BREAKPOINT) {
		widget.setAttribute('data-elfsight-app-layout', MOBILE_LAYOUT);
	}
	document.currentScript.after(widget);
</script>
6

OK..pasted code with widget ID and I’m not seeing the widget at all in either desktop or mobile view.

7

It seems that you’ve pressed Enter when pasting the widget ID which broke the script.

I’ll send to you the script with the correctly added ID in a personal message :slightly_smiling_face: