List, Grid & Carousel Layouts – Events Shortcodes Pro

The Events Shortcodes addon provides multiple layout options to display your events. You can choose between List Layout, Grid Layout, or Carousel Layout depending on how you want events to appear on your website.

Each layout can be easily added using a simple shortcode, and you can further customize its appearance using the Layout Customization settings.

List Layout

The List Layout displays events in a simple vertical list format. Just copy and paste the shortcode below into any page, post, or widget area where you want the events list to appear.

[events-calendar-templates category="all" template="default" style="style-1" date_format="default" start_date="" end_date="" limit="3" order="ASC" hide-venue="no" time="future" featured-only="false" show-description="yes" columns="3" autoplay="true" tags="" venues="" organizers="" socialshare="no" date-lbl="Date" time-lbl="Duration" event-lbl="Event Name" desc-lbl="Description" location-lbl="Location" vm-lbl="View More" category-lbl="Category" filterbar="no" filterbarstyle = "both" ]
PHP

Output:

list layout demo

Grid Layout

The Grid Layout shows events in a grid (rows and columns). Just copy and paste the shortcode below into any page, post, or widget area where you want the events grid to appear.

[events-calendar-templates template="grid-view" style="style-1" category="all" date_format="sed" start_date="" end_date="" limit="3" order="ASC" show-description="yes"  hide-venue="no" time="future" featured-only="false" columns="3"]

Output:

grid layout demo

Carousel Layout

The Carousel Layout shows events in a sliding format, your visitors can move left or right to see more events. Just copy and paste the shortcode below into any page, post, or widget area where you want the events carousel to appear.

[events-calendar-templates category="all" template="carousel-view" style="style-2" date_format="d.FY" limit="5" order="DESC" hide-venue="yes" time="future" columns="3" autoplay="false" featured-only="false" show-description="yes" socialshare="no"]

Output:

carousel layout demo

Layout Customization

After adding the Events Shortcode, you can customize the events layouts using the following options:

layout settings
  • Select Template: Choose the layout style, such as List, Grid, or Carousel.
  • Select Style: Each layout comes with different styles (Style 1, Style 2, Style 3, Style 4). Choose the one according to your requirements.
  • Date Formats: Customize the display of dates by choosing from various formats.
  • Limit the Events: Set a limit for how many events you want to display.
Last Updated
Events Shortcodes Pro

Add events anywhere on your site with flexible shortcodes.

Need Help? Contact Our Support Team
In This Article
Share it
Events Shortcodes Pro

Add events anywhere on your site with flexible shortcodes.