Requirements: EventKoi Pro, Beaver Builder and Beaver Builder’s Themer add-on
This article explains how you can display EventKoi events as an event list (or grid) in Beaver Builder using the Loop module.
While you can manually create an event list in Beaver Builder, using the Loop module allows you to create custom queries such as only display upcoming events or events taking place during a certain time frame.
This article assumes you already understand how to use Beaver Builder’s Loop module. If you do not, we recommend you read their Loop module documentation first.
Overview of how EventKoi integrates with Beaver Builder’s Loop module
If you’re already familiar with Beaver Builder’s Loop module and just want a quick overview of what EventKoi has added into it, this section is for you.
When you query Events in Beaver Builder’s Loop module, you’ll see the following options from EventKoi:
- Order by: You can select to order events by Upcoming events or Event start date.
- Filter: Select specific events or calendars only. You can also choose to exclude specific events or calendars.
- EventKoi Queries: Display events that take place during a specific time frame. Also decide if you want to include recurring instances.
How to build an event list with Beaver Builder: Step-by-step
In this section, you’ll get a step-by-step guide on how to build an event list with Beaver Builder’s Loop module.
1. Add the Loop module and pick a layout
- Inside Beaver Builder, click on the blue + icon on the top right hand corner, next to the Done button.
- Then inside the Modules tab,
- Search for loop
- You should see under Standard Modules, a module called Loop.
- Drag and drop it into your desired place in your page.
Next, select a layout to get started.
2. Set up your queries
In the outline, double click on Loop to open up the settings.
Then in the Content tab, look for Source. And select Custom Query from the dropdown.
In Custom Query section, look for Post Type. There, select Events.
Once you’ve done that, all of EventKoi’s special filters and queries should show up.
Order by
Under Order By, you can select EventKoi – Upcoming or EventKoi – Event Start. You can also select any of the other Beaver Builder defaults, but for this article we are focused on EventKoi-specific options.
Upcoming: When selected, only upcoming events will be displayed. Past events will not show up.
Event start: When selected, this will allow you to display events based on start date.
You can then choose ascending/descending to determine if you want earlier/later events to show first.
Filter
In Filter, you can select specific events or calendars so that only events matching those filters will show up.
You can also do exclusions. This means you can select which events you want to exclude from your events list.
EventKoi queries
Under EventKoi, you can display events that happen during a specific time frame.
For example, you can choose to only display events that start on or after a certain date.
You can also decide if you want recurring instances to be displayed or not. If on, every individual instance will show up in your events list. If off, only the high level event series will show up.
3. Connect your data sources
When you first create your Loop, it comes with default data sources. In this case, there is the featured image, post title and excerpt.
This is useful for a regular blog post, but let’s say we want to add a bit more event details into our list. Here’s how we can do that:
First, we’ll click on the Text Editor to bring up the settings for that module.
Then in the General tab, we’ll look for the small grey + icon next to the Visual and Code options.
This will bring up the data options we can connect to. Here, we’ll search for EventKoi, so that we can see the EventKoi-specific data options.
We’ll hover over the data we want to add. And then select Insert, rather than Connect. If we select Insert, we’ll be able to insert multiple pieces of data inside the Text Editor. If we select Connect, it connects the entire Text Editor module to a single piece of data.
You’ll then be given the option to select the specific event. Since this is for a Loop module, we will leave the option as Current event to keep it dynamic rather than static.
When you’re ready, click Save.
Here’s what the text editor now looks like with event location and event date time added to it. Don’t forget to hit Save at the bottom in order to save the changes.
And here’s what a single event in the event list looks like with those new details added:
Get more from your EventKoi + Beaver Builder integration
There are multiple ways of integrating EventKoi with Beaver Builder. From custom-built elements to advanced dynamic event data, you can control how events appear across your site using Beaver Builder
To learn about all the available approaches and ensure you choose to right path, read our EventKoi + Beaver Builder integration overview: