Event Calendar: How to use different layouts on desktop and mobile

Tips & Discussions Pro Tips
1

Want to use one Event Calendar layout on desktop and a different one on mobile? Here’s how you can do it :backhand_index_pointing_down:

  1. First, choose the layout you’d like to use for desktop in the widget settings.

  2. Then, replace your default Event Calendar installation code with the following script:

<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>

Before using the script:

  • Replace YOUR_WIDGET_ID (line 2) with your actual widget ID.
  • Replace list (line 3) with the layout you’d like to use on mobile.

That’s it! Your Event Calendar will now display different layouts depending on the visitor’s device :sparkles:


Was this solution helpful? Let us know in the comments :wink:

2 Likes