Display The Events Calendar Directly Inside Elementor

If you run events like small workshops, weekly classes, large concerts, or online webinars, you want people to find them quickly and get excited about attending.

The default layouts in The Events Calendar plugin are useful for adding and managing events, but when it comes to design, there is no option for customization. 

That’s where Events Widgets for Elementor comes in. It’s a plugin that connects The Events Calendar with Elementor, letting you create custom event layouts. You can control exactly how your events look matching your brand style, highlighting important details.

Why Use Events Widgets for Elementor?

Events Widets plugin is a powerful addon that extends The Events Calendar plugin functionality by offering advanced customization options:

• Custom Loop Builder: Design custom event items using Elementor’s Loop feature. Create personalized layouts that include only the elements you need.
• Multiple Layout Options: Display events in stunning layouts: Grid, List, Carousel, or Calendar format.
• Category Filters & Search Bar: Add a search bar to your event pages and allow visitors to filter category-based events.
• Pagination & Load More: Include “Load More” buttons and pagination to handle multiple events.
• Date Ranges & Sorting: Control event display based on date (e.g., upcoming or past events) and choose ordering (ascending or descending).
• Venue & Event Info Control: Show or hide venue, description, categories, and other event metadata based on your design preferences.

Step-by-Step Process to Showcase Events inside Elementor

Step 1: Install Required Plugin

First, ensure you have installed and activated The Events Calendar, Elementor, and Events Widgets for Elementor.

Step 2: Create Your Event Loop Template

Navigate to Events Addons → Event Loop Items in your WordPress dashboard. You have two options here:

Option A: Use a Pre-made Template

• Browse through 6 ready-made loop item layouts
• Click “Preview or Edit” any layout according to your brand. 

Option B: Build From Scratch

• Click “Add new Loop Item”.
• Use Elementor’s drag-and-drop interface.
• Add event-specific widgets like, Event Title, Event Date & Time, Event Venue, Event Featured Image, Event Categories, or more.

Step 3: Add Events to Your Page

• Open any page in Elementor where you want to display events.
• Search for “Event Loop” in the widgets panel, drag & drop the Event Loop widget. 

• Now you can customize the appearance of your events.

Step 4: Configure Your Event Display

From Layout settings,

• Layout Type: Select layout from Grid, List, or Carousel.
• Item Template: Choose the loop item template you created in Step 2.
• Events Per View: Set how many events show at once.

From the Filter Bar setting,

• Toggle Show Filter Bar to “On”.
• Choose Filter Bar Type from: Search only, Filters only, or Search + Filters.
• Select which filters to include from Category, Tag, Venue, or Organizer.

From Event Query Settings,

• Events Time: Show All events, Past events only, or Upcoming events only.
• Events Order: Choose in which order events will display, ascending or descending.
• Filter Events By: Pre-select specific categories, venues, or organizers.
• No Events Message: Set custom text when no events are found.

From Pagination Settings,

• Toggle Pagination to “On”.
• Choose your pagination style (page numbers, load more button, etc.).
• Customize navigation text and alignment.
• Set how many events load per page.

Showcasing your events the right way can make a huge difference in how many people attend. With Events Widgets for Elementor, you’re not stuck with a basic layout, instead you can create an event section that looks professional, matches your brand, and works exactly how you want it to.

Additionally, if you want to make your The Events Calendar events more visually appealing, you can check out our other Addons:

• ​Events Shortcodes Pro – Events Shortcodes Pro For The Events Calendar adds the missing shortcode functionality to The Events Calendar plugin. With this plugin, you can easily display your events on any page or post in a list, grid, carousel, slider, masonry, accordion, or even a timeline format.

• ​Events Single Page Builder Pro – Design stunning single event pages with Elementor using pre-built templates and 20+ customizable widgets.

• ​Events Calendar Modules for Divi – Display The Events Calendar Events directly inside Divi with Customizable List or Grid Layouts.

FAQs

1. Can I use The Events Calendar with Elementor?

Yes, you can integrate The Events Calendar with Elementor by using the Events Widgets for Elementor plugin. This addon allows you to design and display events directly inside Elementor with full customization options.

2. Do I need Elementor Pro to use Events Widgets for Elementor?

No, the plugin works with both the free and pro versions of Elementor. However, Elementor Pro unlocks additional design options if you want to combine events with advanced Elementor features.

3. How do I customize the event layout in Elementor?

You can create a Loop Item template inside Events Addons → Event Loop Items. From there, either edit one of the six pre-made templates or build your own layout from scratch using Elementor’s drag-and-drop editor.

4. Is it possible to add a search bar or filters to my event list?

Absolutely. Using Events Widgets for Elementor, you can easily include a Filter Bar option where you can display search, filters, or a combination of both. Filters can include category, tag, venue, and organizer.

5. Can I design single event pages in Elementor?

Not directly with Events Widgets for Elementor, but you can use Events Single Page Builder Pro to design fully customized single event pages with Elementor and over 20 widgets.

6. Can I use these event widgets with Divi instead of Elementor?

If you’re using Divi, you can try the Events Calendar Modules for Divi, which provides similar functionality for displaying events inside Divi layouts.