Divi Events Calendar

Documentation

Home » Docs » Events Feed Module » Guides & Videos

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Events Calendar Modules Plugin by Pee Aye Creative 2.2

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

Events Feed Module Guides & Videos

1. Configure Which Events To Display

The first thing to do in the Events Feed module is to choose which types of events to show in the module. There are various settings to help you do this, so please be sure to review all the available settings carefully. Some possible options include choosing to display all events, dynamic events, related events, related events by series, features events, or events by category, venue, organizer, series, or date. You can also select whether to show canceled, postponed, virtual, hybrid, and recurring events.

Select The Type Of Events

The first and arguably most important setting when setting up the Events Feed module is the Events Selection setting. Choosing an option from this dropdown will determine which other settings display, so be sure to choose carefully. Each option is explained separately in the details below.

  • All Events

Selecting the All Events option will simply display all events on the site without any type of filter so specific criteria. However, you will still be able to enable or disable other settings to show or hide cancelled, postponed, hybrid, virtual, or recurring events.

  • Dynamic Events

The Dynamic Events option will be selected by default when you add the module to your layout. This setting enables dynamic content in the module to display events automatically based on the assigned Divi Theme Builder template. For example, if Dynamic Events is selected in a Theme builder template assigned to All Event Categories, and then a visitor to your website views an event category page, it will automatically display only the events that are in that current category. Learn more in our event category guide.

  • Related Events

The Related Events option is only relevant when used on a single event pages. It is used to automatically display events match some criteria and are similar to the current event. You can add the Events Feed module in your All Events Theme builder template, and it will dynamically display events that are within the same category as the current event. If no categories match the related criteria, it will just show other events.

  • Featured Events

The Featured Events option is associated with a feature in The Events Calendar, which allows admins to set selected events as featured when you are editing the backend of a single event page. This feature will only display events that are marked as featured. One disadvantage of this feature is that it cannot be combined with other options and will only show featured events (you could also achieve a similar effect by creating an event category named “Featured” and use the option below instead).

  • Custom Events Selection

The Custom Events Selection option gives you full control over which events show in the feed based on specific criteria, such as category, organizer, venue, series, and date range. When this option is selected, additional settings will appear below to select categories, organizers, venues, series, date range, etc.

Select Events By Category, Organizer, Venue, Or Series

When you select Custom Events Selection in the Events Selection setting, a new group of checkbox settings will appear for selecting events to display based on their category, organizer, venue, or series that you have added to your website in The Events Calendar.

How This Works

It is important to understand how it works. You can choose just one option or mix-and-match any choice of categories, organizers, venues, or date range. By default, none of the checkboxes are selected, which means that all the events will be shown without any filter. However, once you select at least one checkbox within each checkbox group for category, venue, organizer, and series, then only events that match the selected checkbox will be displayed.

You can mix and match criteria however you want. You may want to display events within a specific category, but are not concerned about venue, organizer, or series. In that case, make your category selection but do not select any organizer, venue, or series. Keep in mind that it may give very narrow results depending on your selections, especially if you select a low number of options within just one of the four groups, because then it would only match the combined criteria.

Keep in mind the notes explained above. If you do not select any checkboxes, then events from all checkboxes will be displayed.  If you select one or more checkboxes, then only events that match the selected checkbox will be displayed.

Select Events By Date

When you select Custom Events Selection in the Events Selection setting, a new group of settings will appear for selecting events to display based on date. You can choose from a date range with a start and end date picker, or a relative date based on today, this week, or this month.

Date Range

When you select the Date Range option, additional date picker fields will appear below to select the Date Range start date/time and Date Range End date/time.

Relative Date

When you select the Relative Date option, additional settings will appear below to select events to display based on a relative date of today, this week, or this month.

The Events Happening By Relative Date setting allows you to display events in the feed based on relative date, which means it will display events based on when the visitor is on your website compared to the actual event dates. For example, if an event has the same date as the current day, it will display when Today is selected. We recommend adding a Text module above the Events Feed module with a headline such as “Events Happening This Week.” Keep in mind, these settings will also be affected by other settings such as Events Status and Cutoff Point For Ongoing Events. 

  • Today

This option will display events within the current day 24-hour period. 

  • This Week

This option will display events within the current week, Monday through Sunday.

  • This Month

This option will display events within the current month of the year.

Show Cancelled And Postponed Events

The Events Calendar has a feature to set the event status of each event as scheduled (default), cancelled, or postponed. This setting allows you to show or hide cancelled or postponed events in the feed, which means events with a status of cancelled or postponed will be shown when enabled, or hidden when disabled. Since it is important to know if an event is canceled or postponed, we add badges on the frontend that say “Canceled” or “Postponed” that appear before the event title.

Show Virtual Or Hybrid Events

If you are using the Virtual Events addon by The Events Calendar, you can use these settings to show or hide Virtual Events or Hybrid Events in the feed. Events that are marked as virtual or hybrid will be shown when enabled, or hidden when disabled.

Show Recurring Events

If you are using The Events Calendar Pro, you can use this setting to show or hide Recurring Events in the feed. Recurring events will be shown when enabled, or hidden when disabled.

Limit Number Of Recurring Events To Show

If you are using the Recurring Events feature in The Events Calendar Pro, you can use the first setting to show or hide Recurring Events in the feed. Recurring events will be shown when enabled, or hidden when disabled.

When enabled, an input field setting will appear to set the maximum number of events to show at any one time from within a series of recurring events. For example, if a series of recurring events has 20 events, but you set this limit to show 3, then only the next 3 of those events will show within the feed at any given time.

Configure Event Display Criteria

After selecting which types of events to show, there are more decisions about the way those events are displayed. For this we can select from various criteria such as the future/past status, the order descending or ascending, the cutoff point for ongoing events, the number of events, or even an event offset.

Past/Future Status

In most situations, events are displayed that are upcoming in the future, and this will be set by default. However, you may also want to create an archive of events that have already passed. Or in some cases, show both future and past events together.

Events Order

This setting determines whether the events will be shown in order from top to bottom or bottom to top based on the date. The default is Descending, but this is sometimes helpful to change when showing past events.

Cutoff Point For Ongoing Events

This setting gives you two options to decide if ongoing events should show or hide based on start or end date/time. The default behavior for ongoing events is to show the event in the feed until the end date/time is reached. Or you can choose to hide the event if the start time is already past, even if it is still ongoing and hasn’t ended yet.

We know this can sound confusing at first, so let me share an example. If an event start date/time was yesterday or earlier today, but the end date/time is tomorrow or later today, you get to decide if that event should remain in the feed until later, or if it should not be visible anymore.

Events Count

This option allows you to choose how many events show at once time in the Events Feed module. This is set to 6 by default, but can be changed to any number you prefer. Keep in mind that you can also enable one of the pagination options for the website visitor to click to see more events. When pagination is used, this number determines how many events are shown within one page/view.

Events Offset Number

This option allows you to skip an event or events from displaying in the feed. This works exactly like the Blog module Offset number. If you enter a 1, it will skip the first event, a 3 would skip the first 3, etc.  This is useful if you want to use more than one Events Feed module set to  different layouts. For example, you could have one event featured in a module with a List layout, then below that have another module set to Grid layout. In the second module you would put a 1 as the Events Offset Number to skip the first one.

Write A No Results Message

If there are no events that match all the selected criteria above, a message will display for the visitors to inform them that there are no events at this time. This message can be customized with your own text.

2. Select Your Preferred Layout

Now that you have selected which events to display and some other configurations, you can move on to setting up the layout. The Events Feed module provides a variety of layouts for you to choose for displaying your events and event details.

Select The Type Of Layout

The default layout will be set to a grid of multiple columns of events per row, but you can also choose a list layout with event arranged in rows. You can also choose a cover layout, which is similar to the grid but with the featured image in the background of each event instead.

  • Grid

As the name suggests, the Grid layout presents a classic grid view similar to the Divi Blog module. This option stacks each event featured image at the top followed by the title, details, excerpt, and button. You can also change the number of columns. You can view the grid layout demo to see the options available.

  • List

The List layout displays the events with a horizontal display. You will notice as soon as you choose the List option that a new setting appear below. You can view the list layout demo to see the options available.

List Type

The List Type setting appears when choosing the “List” layout option. This dropdown selector gives you full control over the display, allowing you to choose which items you want to show and in which order you want them to be displayed in the feed. The elements will appear in the order shown from left to right in a single row, meaning whithin a single event in the list layout.

Events By Month With Headings

This setting allows you to group events with dividers and headings for each month. You can view our demo layout to see how this works.

  • Cover

The Cover layout displays the events in a grid, but the featured image is located in the background behind all the other event details. Be sure to check the image overlay and adjust your text colors as needed for visibility. You can view the cover layout demo to see the options available.

When the Cover layout is used, new settings appears inside the Image toggle. The Show Image Overlay automatically turns on when Cover layout is selected. The Image Overlay Color is set to black at 50% opacity by default, but of course you can adjust that as needed.

Select The Number Of Responsive Columns

This setting allows you to choose the number of columns for displaying events in the Grid and Cover layout options. This setting is responsive, which means you have full control over the number of columns that you want to use for Desktop, Tablet, and Phone screen sizes. It works just like other Divi responsive options by clicking the little phone icon beside the setting label.

3. Choose Which Elements And Details To Show

The Events Feed module includes a huge list of items which can be shown or hidden based on your own preference. This includes things like showing a callout box, title, image, details, excerpt, and button. Each of these items have all the settings you need to set up the module exactly how you want it. Keep in mind that we have design settings in the Design tab of the module to style and customize every aspect of the details.

Enable And Configure The Callout Box

The callout box allows you to show some important details such as the date, time, month, day of the week, or year at a glance in a highlighted location within the module layout. By default, the date and month of the event will be enabled, and the day of the week, year, and time will be disabled. You can see the callout box in our demos or in the screenshots above.

Custom Date/Time Format

When you enable one of the elements within the callout box, additional settings will appear to set a custom date/time format using standard PHP date/time format parameters.

Show As Range

You can also choose whether it should be displayed as a range or not for events that span more than one day, month, etc.

Enable And Configure The Details

Events have many important details to display, and the Events Feed module has all the settings you need to set them up. Some event details may not be needed in every situation, and those can be enabled or disabled as needed. Some event details may need to be configured a specific way for your location or country, or just based on your preferences, so we have provided many different settings and options for how your events can be displayed.

Event Title

In some rare situations, you may want to disable the event title, and if so you can do so easily.

Featured Image

Everyone loves visuals, so we do recommend using featured images for all your events. But if for some reason you do not want to use them, they can be easily disabled with the setting. Featured images can be added to each event in the backend of each single event using The Events Calendar.

Details

The details section here includes options to enable or disable specific items, write custom label text, configure dates and time settings, and configure location preferences.

Adjust Detail Icon And Label Preferences

There are several ways you can enhance how each of the details listed above are displayed by using icons and labels. The first option is not default and is an older option, but could be enabled if you want to display the details in more of a paragraph instead of a list of details. The main options to select here are whether you want to use labels, icons, both labels and icons, or neither. You can also choose to show those icons and labels inline with the detail item, or stacked above it. We even have a setting to show a colon after the label if you prefer. You can view the details display demo to see each of these variations.

Enable And Configure The Excerpt

An excerpt is a WordPress feature that allows you to provide a short summary of a post, in this case an event in The Events Calendar. It is a great idea to include this for each event, and is nice to show it in the Events Feed module along with the other details. The excerpt uses the standard WordPress length of 270 characters, but can be customized as needed.

Excerpt Content

If you are not using excerpts for your single event pages, another option is to choose to show the event content here in the excerpt area. This will show text from the event description instead. This feature can be tricky, depending on what content is used in the single event, it may not appear as expected in the excerpt.

Enable And Customize The More Info Button

In most situations, you will want the visitor to click a button to view the full event details on the single event page. The More Info Button will be enabled by default. You can even customize the text of the button if needed.

4. Configure The Pagination

If you have more events than the number of events set as the “Events Cont” in the Content toggle, then you need pagination in order to allow your visitors to browser through the events. Keep in mind that we have design settings in the Design tab of the module to style and customize the pagination. You can view the pagination demo to see how each of these work.

Show Pagination

This setting enables or disables pagination. When this is enabled, additional settings will appear below.

Choose The Pagination Type

This option allows you to select the type of pagination that you want to use for loading more events in the feed. There are three options to choose from in the pagination type dropdown.

  • Paged

The Paged pagination option displays next and previous links below the feed. These links are used to load older or new events in the feed. The input fields allow you to customize the previous and next link text.

  • Numeric

The Numeric pagination option displays a series of numbers based on how many pages are needed to show all the events, with links to jump to the first and last page. 

  • Load More Button

The Load More Button pagination option adds a button which will load more events in the feed when clicked. You can use the input field to write any number to determine how any events should load each time when clicking the load more button. You can also write any custom text for the load more button.

5. Adjust The Link Options

The Events Feed module includes a variety of link option which help you adjust everything related to links like when clicking to the single event pages, opening links in new tabs, enabling or disabling links on categories, and more!

By default, clicking on an event image, title, or more info button will link directly to the single event page. But in some situations, you may want to either disable the links, replace the link with a custom link, or redirect to the event website link instead.

  • Disable Links

The Disable Links option will reveal additional settings to disables pagination. When this is enabled, additional settings will appear below for disabling the title, image, or button. These are separate settings, since sometimes you only want to disable one or two but keep the others active. 

  • Replace With Custom Link

The Replace With Custom Link option provides an input field to enter your own website URL link. Keep in mind, with this option, all events in the module will be linked to that URL.

  • Redirect To Website Link

The Redirect To Website Link option refers to the feature in The Events Calendar to set a custom URL for the event website. You can add or edit this link when editing a single event page in The Events Calendar. When this option is used, the events will link to the website link instead of the single event page.

Single Event Link Target

You can choose whether the single event links open in the same window or a new tab.

Make Entire Event Clickable

Instead of only being able to click on the event image, title, and button, you may want visitors to be able to click anywhere within the event. This feature is especially nice if you are using any hover effect on the entire event.

The Events Feed module also has other link settings for the details, such as enabling links to individual category and tags pages. If you are using The Events Calendar Pro, you can enable links to organizer and venue pages. You can also customize the website URL link text. Each of the link options have a choice of opening the link in a new tab or same window.

6. Adjust The Design Of Everything

The focus of this guide is about setting up the events and configuring all the functionality settings in the Events Feed module. However, don’t forget that we have hundreds and hundreds of design settings in the Design tab of the Events Feed module for styling and customizing every aspect of the module. We invite you to explore all the toggles and settings so you can design your events just the way you want!

Last updated Dec 4, 2023 @ 9:27 PM

Need Product Support?

Talk to us. We are happy to help.

I hope everything is going well! If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us on our support page.