# Display The Events Calendar in Elementor Pages **[The Events Calenda](https://www.liquidweb.com/software/the-events-calendar/)**r is a powerful plugin for creating and displaying events, and it works well with popular page builders like **[Elementor](https://elementor.com/)**. It provides a dedicated “**Events List**” widget to show an upcoming events list on your Elementor pages.  The widget works well for simple event listings. However, if you want more layouts, highlight past events, display events from a specific category or date range, and want more styling controls, you will need an additional tool. This is where an addon like **Events Widgets for Elementor and The Events Calendar** comes in. The addon gives you advanced options to customize your events calendar on Elementor pages.  In this blog, we will guide you on how to add an events section on your Elementor pages using Events Widgets for Elementor and The Events Calendar.  Before getting started, let’s look at its features.   ## Events Widgets For Elementor And The Events Calendar [![events widgets for TEC and Elementor](https://eventscalendaraddons.com/wp-content/uploads/2023/01/events-widget-for-elementor-logo-1024x329.png)](https://eventscalendaraddons.com/wp-content/uploads/2023/01/events-widget-for-elementor-logo.png) **Events Widgets for Elementor and The Events Calendar** is an **addo**n that adds a dedicated **“Events Widgets”** to the Elementor widget panel. It displays events you’ve already created with The Events Calendar. With simple **drag-and-drop,** the widget displays your events in a **List, Minimal List,** or **Calendar layout**. You can further customize the **style**, **date format**, and **event details** as per your requirements. Additionally, you can select specific **event categories** and show **upcoming events,** **past events**, or **both** on your events calendar. With this addon you can easily add an events section to your homepage, landing page, or any other Elementor page by following the steps below.  ## Steps to Add an Events Listing with Events Widgets Before getting started, make sure to install and activate the following: - [**Elementor**](https://wordpress.org/plugins/elementor/) - [**The Events Calendar**](https://wordpress.org/plugins/the-events-calendar/) - [**Events Widgets for Elementor and The Events Calendar**](https://wordpress.org/plugins/events-widgets-for-elementor-and-the-events-calendar/) ### Add the Widget to Your Page - Add a new page or edit an existing page with **Elementor**. - In the **Elementor widgets panel**, search for “**Events Widgets**” and drag the widget into your page. [![events widgets](https://eventscalendaraddons.com/wp-content/uploads/2023/01/events-widgets.png)](https://eventscalendaraddons.com/wp-content/uploads/2023/01/events-widgets.png) ### Choose Which Events to Display - From the **Events Widgets Settings,** customize the events calendar content and display. **Type of Events**: Select **Upcoming**, **Past**, or **All Events**. - **Event Category**: Select All to include every **category**, or select specific categories. - **Events Time**: Keep **All Events** or use the available **date-range** option. - **Layout**: Choose **List**, **Minimal List**, or **Calendar**. - **Select Style**: Choose a **design** for your selected layout. - **Number of Events**: Set the **maximum number** of events to display. - **Date Format**: Choose the format for **event dates**. - **Events Order**: Select **ASC** to show earlier events first or **DESC** to show later events first. - **Hide Venue**: Set this to **Yes** to hide the venue or **No** to display it. - **Display Description**: Choose whether to show **event descriptions**. - **Display Category**: Choose whether to show **event category names**. - **Disable Schema** **Markup**: Keep this set to **No** to help search engines understand your event details. [![events widgets settings](https://eventscalendaraddons.com/wp-content/uploads/2023/01/events-widgets-content-settings.png)](https://eventscalendaraddons.com/wp-content/uploads/2023/01/events-widgets-content-settings.png) ### Customize the Style - Open the **Style tab** and, under the **Color & Typography Settings** you can customize the main skin, event background, featured event colors, and the colors and fonts for event dates, titles, and descriptions. [![style settings](https://eventscalendaraddons.com/wp-content/uploads/2023/01/style-settings-events-widgets.png)](https://eventscalendaraddons.com/wp-content/uploads/2023/01/style-settings-events-widgets.png) [![style settings events widgets](https://eventscalendaraddons.com/wp-content/uploads/2023/01/event-widget-style-color-settings.png)](https://eventscalendaraddons.com/wp-content/uploads/2023/01/event-widget-style-color-settings.png) ### Preview and Publish - Once you are satisfied with your events section, **preview** the page.  - Click **Publish** to save your changes. For more styling and customization ideas, you can explore the [******Events Widgets for Elementor and The Events Calendar demos**](https://eventscalendaraddons.com/elementor-widget/the-events-calendar/). The free version gives you enough options to create an attractive event listing, but if you want more customization, you can explore **Events Widgets Pro**.  ## Add More Customization with Events Widgets Pro [**Events Widgets Pro** ](https://eventscalendaraddons.com/plugin/events-widgets-pro/)extends the free addon with additional layouts, custom event templates, and search tools.  Events Widgets Pro adds **Grid** and **Carousel** layouts that add more ways to display events on your homepage, landing pages, or event galleries.  To customize single event cards, you can use **Events Loop Item** and design a reusable event card with **ACF field suppor**t, or you can use **premade designs**.  For visitors, you can add an **Events Search and Filter Bar** to help them find relevant events. **AJAX Load More** and **Pagination** options make your event listings easier to browse. ## Final Thoughts **Events Widgets for Elementor and The Events Calendar** is a useful addition if you manage events with **The Events Calendar** and build your pages with **Elementor**. The addon connects your event schedule with your Elementor pages, giving people an easier way to find the events they are looking for.