Displaying Future and Past Events in the Listing Grid Widget

To query the Listing Grid by the “Date” meta field, you can use relative formats located in the section with the same name. 

For instance, we use a Custom Post Type “Events” that has a meta field of a “Date” Field type dubbed “event-date.”

To display only future or past events, the query should be built in WordPress Dashboard > JetEngine > Query Builder.

In the Queries List directory, click the “Add New” button to open the editing area.

In the General Settings section, complete the Name field and set the “Posts” Query Type. 

Then, in the following Posts Query section, head to the General tab and pick the Post Type you are working with. It should be the same as the Listing source set during the creation of a Listing item.

The following settings vary on the type of content you want to display. So, move on to the needed part of the article.

To showcase future events, navigate to the Meta Query tab and press the “Add new” button to access settings.

Complete the Field key/name with the meta field value of a “Date” Field Type. 

Select the “Greater than” Compare operator and press the “Dynamic Tag” button next to the Value field to open the options list.

Among the variants, find and press the “Today” option.

Set the “Timestamp” as the Type and complete the Clause name with a desired value.

Return to the General tab. Press the “Add new sorting parameter” button in the Order & Order By section.

Complete the Order By field with an “Order by meta clause” option. Select the Meta Clause created earlier and choose the needed Order: “From lowest to highlest values” or “From highest to lowest values.”

Press the “Add/Update Query” button to save the result.

The procedure is similar to the one for future events.

In the Meta Query tab, complete the Field key/name with the meta field value of the “Date” Field Type. Select the “Less than” Compare operator.

Find and pick the “Today” option by hitting the “Dynamic Tags” button next to the Value field.

Set the “Timestamp” Type and complete the Clause name with a desired value.

Return to the General tab and press the “Add new editing parameter” in the Order & Order By section.

Then, pick the “Order by meta clause” Order By option, select the Meta Clause by its name, and choose the needed Order option.

Save the query by clicking the “Add/Update Query” button.

To build the query for the previous month’s posts, head to the Date Query tab and hit the “Add new” button.

Complete the After field with the “first day of previous month midnight” value and Before with the “first day of this month midnight” value.

Set the “Equal” Compare operator and pick the “Post Date” option as Column. 

Don’t forget to save the query by pressing the “Add/Update Query” button.

To finalize, go to the page editor and place the Listing Grid widget there if this wasn’t done before.

Then, in the Listing Grid widget’s Content settings, open the Custom Query tab and activate the Use Custom Query toggle.

Pick the needed option in the Custom Query field. 

For instance, we have added three Listing Grids. Two of them are identical and show future and past events. They display the “event-date” meta field data. The third Listing Grid is slightly different. Instead of showing the “event-date,” it shows the date when the post was published.

For every Listing Grid, a different query is used.

Click the “Publish/Update” button to save the changes.

Check the result on the front page. The displayed content will differ depending on the query you have applied.

If you build a future events query, it will only show events where the “Date” meta field is set to the day after “Today.”

For this tutorial, we created a future events query on September 27, 2023, so it displays events occurring after that date.

If the past events query is selected as Custom Query, it will display only events that have already taken place.

The last query will display only events that happened in the previous month.