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

**URL:** <https://community.elfsight.com/t/event-calendar-how-to-use-different-layouts-on-desktop-and-mobile/174543>\
**Category:** Pro Tips\
**Tags:** event-calendar\
**Created:** [September 17, 2026, 6:32pm UTC](https://community.elfsight.com/t/event-calendar-how-to-use-different-layouts-on-desktop-and-mobile/174543 "2026-09-17T18:32:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 17, 2026, 6:32pm UTC](https://community.elfsight.com/t/event-calendar-how-to-use-different-layouts-on-desktop-and-mobile/174543/1 "2026-09-17T18:32:02Z")

</div>

Want to use one [Event Calendar](https://elfsight.com/event-calendar-widget/) layout on desktop and a different one on mobile? Here’s how you can do it 👇

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:

```auto
<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](https://help.elfsight.com/article/1219-where-to-get-your-widget-id-in-new-dashboard).
- 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 ✨

  

> Was this solution helpful? Let us know in the comments 😉