Introduction
In this area of our Divi Events Calendar plugin documentation, you will learn everything you need to know about using the Events Feed module. As you set up and use the module, I highly recommend that you reference this guide, which includes details about every setting that is available and what it does. You should also check out the Events Feed Module Demos to see how the module works and get some inspiration.
Module Description
The Events Feed module was our very first module, and it is still probably the most versatile of them all, allowing you to display a feed of events in many different layouts with a ton of features, options, and design settings. There are so many possibilities with this module, and it can be used on any page or archive page on your Divi website. This module is also great for displaying dynamic event categories, related events on single event pages, event archives of past events, and event search results.
View Live Demos
View Settings List
Guides & Videos
We have organized the documentation for the Events Feed module according to main settings within the module. You can view the full documentation by opening the toggles in the page below.
Content
Events Selection
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 detail below.
All Events
The default setting when you add the module is All Events. This will simply display all events on the site without regard for category, organizer, venue, etc. However, you will still be able to enable or disable the other settings to show or hide cancelled, postponed, recurring, hybrid, or virtual events.
Dynamic Events
This setting enables a special feature that allows you to show events based on the Divi Theme Builder template. When the module is placed in the template layout, it will show events automatically based on the template assignment. For example, if Dynamic Events is selected in a Theme builder template for Event Categories, and then a visitor views an event category page, it will automatically display only the events that are in that current category. This feature saves you an incredible amount of time and hassle, and highly recommend for event category templates.
Related Events
This option should be used when an Events Feed module is placed on the single event pages to show events that are similar to the current one. Often users want to place a headline such as “Related Events” over the module and display a grid of three events. We think this is a great idea! This will display events that are in the same category or categories as the current event. If no categories match, it will just show all events.
Featured Events
The Events Calendar has an option to mark an event as featured when you are editing the backend of a single event page. This setting allows you to choose to show a feed of only the events that are marked as featured. Please note, choosing this option will only show featured events, nothing else.
Custom Events Selection
Perhaps the most useful option for most users is the Custom Events Selection. This option gives you full control over which events show in the feed based on specific criteria, such as category, organizer, venue, and date range.
Categories, Organizers, Venues
These checkboxes popular dynamically based on the event categories, organizers, and venues that you have added to your website in The Events Calendar.
You can choose just one option or mix-and-match any choice of categories, organizers, venues, or date range. If you do not select any checkbox, then all items are included. Once you select a checkbox, then only that item is included. This applies to categories, organizers, and venues.
- If you do not select any categories, then any category will be included. If you select one or more categories, then only events that match will be displayed.
- If you do not select any organizers, then any organizer will be included. If you select one or more organizers, then only events that match will be displayed.
- If you do not select any venues, then any venue will be included. If you select one or more venues, then only events that match will be displayed.
You can mix and match criteria however you want. You may want to display events with a specific category, but are not concerned about venue or organizer. In that case, make your category selection and do not select any organizer or venue.
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 three – categories, organizers, and venues. For example, you may have several events in Outdoor Events category, but only one in Doug Fir Lounge. In that case, only that event would show because it would be the only one to match the combined criteria.
Events Status
This option determines whether to show events that are upcoming in the future or have already passed, or both. Most of the time, you would want this set to Future, which it is by default.
You may want to simply duplicate the module and set the status of one to Future, and another to Past. You can even include a headline above each module to indicate future or past. Some users choose to use a separate page to show an archive of past events, and we like this idea.
Past
The Past option will only display events with starting dates in the past.
Future
The Future option will only display events with starting dates in the future.
Both Past & Future
The Both Past & Future option will display all events in the future and past.
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.Â
Ascending
This will display the events with the oldest event at the top and the newest at the bottom.
Descending
This will display the events with the newest event at the top and the oldest at the bottom.
Included Categories
Under the Included Categories setting you will see all the names of the event categories that you have added to your site. By default, none of the categories are selected which actually means that all of the events will be shown without regard to category. When you select one or more event categories, then only those events in one of the selected categories with the tick mark will be shown in the feed.
Date Selection Type
Choose to use a specific start and end date range or use a relative date.
Date Range
This option will bring up two additional options to select the Date Range start date/time and Date Range End date/time.
Relative Date
This option will bring up an additional option to select a relative date.
Events Happening By Relative Date
This setting allows you to display events in the feed based on relative date when the visitor is on your website. The options so far are Today, This Week, and This Month. We recommend adding a Text module above the Events Feed module with a headline such as “Events Happening This Week.”
Today
This option will show events with a start and end date/time on the current day. Keep in mind this will also be affected by other settings such as Events Status and Cutoff Point For Ongoing Events.
This Week
This option will show events with a start after today and end date on Saturday.
This Month
This option will show events with a start and end date/time on the current day. Keep in mind this will also be affected by other settings such as Events Status and Cutoff Point For Ongoing Events. This will include events from Today and This Week.
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.
Show Cancelled And Postponed Events
The Events Calendar has a feature to set events as scheduled, cancelled, or postponed. This setting allows you to show or hide cancelled or postponed events in the feed. Events that are marked as cancelled or postponed will be shown when enabled, or hidden when disabled. Enabling the setting will also add badges that say Canceled or Postponed that appear before the event title.
Show Virtual Events
This option is only relevant if you are using the Virtual Events addon by The Events Calendar.
This setting simply allows you to show or hide Virtual Events in the feed. Events that are marked as virtual will be shown when enabled, or hidden when disabled.
Show Hybrid Events
This option is only relevant if you are using the Virtual Events addon by The Events Calendar.
This setting simply allows you to show or hide Virtual Events in the feed. Events that are marked as virtual will be shown when enabled, or hidden when disabled.
Show Recurring Events
This option is only relevant if you are using The Events Calendar Pro.
It allows you 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
This option is only relevant if you are using the Recurring Events feature in The Events Calendar Pro.
This option is used 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.
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.
Elements
Show Featured Image
Choose to show or hide the event featured image. Keep in mind that the featured image is set within the backend of each single event using The Events Calendar.
Show Title
Choose to show or hide the event title. While this setting would almost always be enabled, this setting can be useful if you are using the Offset feature to create a customized display.
Layout
Layout
The first setting called Layout is a dropdown with three options:
- Grid
- List
- Cover
These choices will each be discussed in the next section, but for now just know that it is important to first make this choice. The layout is set to Grid by default.
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 and other event details.
Keep in min dyou can also change the number of columns.
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 appears called List Type.
You will also have the setting to change the number of columns with this option.
List Type
The List Type setting appears after 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 to be displayed in the feed.
Image, Details
This option places each the event featured image on the left and all the other event details stacked on the right. The Callout is not shown with this option.
Callout, Image, Details
This option places the callout box on the left, then the featured image in the middle, then the rest of the details on the right.
Callout, Image, Details, Button
This option places the callout box on the left, the featured image next, then the details, then the button on the right.
Details, Image
This option is just the opposite version of the Image, Details option. This option places event details stacked on the left with each the event featured image on the right. The Callout is not shown with this option.
Callout, Details, Image
This option places the callout box on the left, then the details in the middle, then the featured image on the right.
Callout, Details, Image, Button
This option places the callout box on the left, the details next, then the featured image, then the button on the right.
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 will also have the setting to change the number of columns with this option.
Image Overlay
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.
Number Of Columns
This option allows you to define in how many columns of events in the feed you want to display for any of the layout options.
Responsive
This setting is applicable for Grid, List, and Cover layouts. This setting is also responsive, which means you have full control over the number of columns that you want to use for different screen sizes. It works just like other Divi responsive options by clicking the little phone icon beside the setting label. You can set a different number of columns for each device, Desktop, Tablet, and Phone.
Callout Box
Show Callout Box
Choose to show or hide the callout box. The callout box allows you to show some important details such as the date and time at a glance in a highlighted location.
Show Callout Box Date
This setting enables the event date in the callout box. When the date is enabled, a new setting to set the date format also appears, which accepts PHP date format parameters.
Show Callout Box Month
This setting enables the event month in the callout box. When the date is enabled, a new setting to set the date format also appears, which accepts PHP date format parameters.
Show Callout Box Day Of The Week
This setting enables the event day of the week in the callout box. When the date is enabled, a new setting to set the date format also appears, which accepts PHP date format parameters.
Show Callout Box Year
This setting enables the event year in the callout box. When the date is enabled, a new setting to set the date format also appears, which accepts PHP date format parameters.
Show Callout Box Time
This setting enables the event time in the callout box. When the date is enabled, a new setting to set the time format also appears, which accepts PHP date format parameters.
Details
Time Format
This option allows you to specify the time format that you want to apply for the dates showing in the Event Feed. By default, the time format is the same as in your WordPress Settings or The Events Calendar settings. However, if you want to have even more control over this, we have provide you with the option to change the time format for the Events Feed module by specifying a valid PHP time format in this field. For example, if you specify h:i:s then it will showcase the time something like this 08-30-12 and so on.
Date Format
This option allows you to specify the date format that you want to apply for the dates showing in the Event Feed. By default, the date format is the same as in your WordPress Settings or The Events Calendar settings. However, if you want to have even more control over this, we have provide you with the option to change the date format for the Events Feed module by specifying a valid PHP date format in this field. For example, if you specify y-m-d then it will showcase the date something like this 2021-06-20 and so on.
Show Event End Time
By request, we added a new setting to show or hide the event end time. Keep in mind, you do not need to add an end time in The Events Calendar, you can just choose the start time as the end time. But some users did not know that, so I can see why this is helpful. This applies to all modules.
Excerpt
Show Excerpt
This setting enables or disables the event excerpt from showing. When this setting is enabled, additional settings will appear below.
Excerpt Content
This dropdown setting allows you to choose to show the default event excerpt which you write on each single event, or to show text from the event description.
Excerpt Length
This option allows you to trim the number of characters displaying in from the excerpt. By default his is set to 270 characters, which is the same as WordPress and Divi. But if you want, you can change this by writing any number in the field to control the length of the excerpt.
More Info Button
Show More Info Button
This setting enables or disabled the more info button, which is used to link to the single event page.
More Info Button Text
This input field allows you to enter any custom text for the more info button that links to the single event page.
Pagination
Show Pagination
This setting enables or disables pagination. When this is enabled, additional settings will appear below.
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
This option provides links for next and previous, which simply loads a new set of events going forward or backwards.
Numeric
This option provides numbered pagination which shows the total number of pages, current page number, and links to jump to the first and last page.
Load More Button
This option provides a button which will load more events in the feed when clicked using. Selecting this pagination type will show additional options.
Load More Button Number Of Events To Load
This input field allows you to write any number to determine how any events should load when clicking the load more button.
Load More Button Custom Text
This input field allows you to write any custom text for the load more button.
Paged Pagination Links Custom Text
This input field allows you to write any custom text for the load more button.
Load More Pagination Button Design Settings
Currently, we don’t have the customization options for the paged and numbered type pagination but we can totally customize the load more button type pagination by going to the Events Feed Settings > Design Tab. Under the load more button tab you will see two options:
Use Custom Styles For Load More Button
Enabling this option will provide you a lot of customization options to customize the Load More Button. All the options are standard button customization options that you encounter while working on the buttons under Divi and using the options you can style the button and the button text. You also get the feature to show the icon and customize the visibility of the icon.
Button Alignment
This option will allow you to align the Load More Button inside the Events Feed container. You can left, right, or center align the button as per your liking.
Bonus: Customize Paged type Pagination using CSS
The CSS Snippet given below will allow you to change the Older and Next Entries text in the paged type pagination. Go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the CSS snippet given below:
a.ecs-page_alignment_left {
visibility: hidden;
}
/*add new custom previous pagination text*/
a.ecs-page_alignment_left:before {
content: 'Left Text Here';
visibility: visible;
color: red;
font-size: 22px;
font-weight: bold;
}
/*remove default next pagination text*/
a.ecs-page_alignment_right {
visibility: hidden;
}
/*add new custom next pagination text*/
a.ecs-page_alignment_right:after {
content: 'Right Text Here';
visibility: visible;
color: red;
font-size: 22px;
font-weight: bold;
}You can place your content in the content property inside the given CSS Snippet. Other than that you can change the font size, color, font-weight of the text as per your liking.
No Results Message
No Results Message
This input field allows you to write your own custom message when there are no events in the feed that match your criteria set in the Content toggle. Feel free to change the wording based on the type of events you are displaying.
