Divi Events Calendar

Documentation

Home » Docs » Events Feed Module

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

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.

Pee Aye Creative Icons 5

View Live Demos

Pee Aye Creative Icons 29

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.

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.

Button Text

This input field allows you to write any custom text for the load more button.

Load More Button Design Settings

Currently, we don’t have the customization options for the paged and numbered type paginations 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.

Links

Connection

Last updated Oct 26, 2022 @ 5:39 PM