How to dynamically change the Event Calendar layout

The default settings of the Event Calendar widget allows you to choose only one layout. However, we are happy to say that you can still use a single Event Calendar widget in multiple layouts all at once. This article will provide a step-by-step guide to help you set this up.

Why you may need this feature

This feature can be quite useful when you need to use a single Event Calendar widget in various layouts on different pages of your website. For example, you might want to display the widget with the List layout on a dedicated “Events” page, while having the Grid layout on your website's main page.

In the past, you had to create multiple Event Calendar widgets with the same content but with different layouts and then install them on the desired pages individually. However, with the method outlined in this article, you can skip the process of creating multiple widgets.

How to use the widget in different layouts

To make the widget change its layout dynamically depending on the page it's installed on, you need to use the following attribute:

data-elfsight-app-layout

This attribute, when added to the widget installation code, specifies the layout the widget should have on the page where it is added. For instance, if the widget's default layout is List, but you prefer it to have the Grid layout on a specific page of your website, you should insert the widget installation code on that page in the following manner:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="grid"></div>

In this case, all the settings of the Grid layout that you have selected within the widget's editor will be applied to the widget on this specific page. As for the other pages where you have this widget installed, the widget there will still have the List layout, unless you choose to have different layouts on some of those pages as well.

To sum up, to dynamically change the widget's layout to a different one on a specific page of your website, its installation code should be added as follows:

1

For the Grid layout:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="grid"></div>
	

2

For the List layout:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="list"></div>
	

3

For the Masonry layout:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="masonry"></div>
	

4

For the Slider layout:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="slider"></div>
	

5

For the Month layout:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="month"></div>
	

6

For the Week layout:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="week"></div>
	

7

For the Day layout:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID" data-elfsight-app-lazy data-elfsight-app-layout="day"></div>
	

Well done. Now that you know about this feature, you can efficiently use it to display your Event Calendar widget in multiple layouts at the same time!