Upcoming Events in a Custom Grid Layout with The Events Calendar

This members-only tutorial provides the steps to show 3 future/upcoming events when using The Events Calendar by Modern Tribe in a grid layout in Oxygen.

This is meant for secondary loops like when you want to show the future events on say, the homepage or another static Page. For limiting the events on the events archive page to future ones, follow this tutorial instead.

On the desktop layout, we shall show the first event on the left in a larger size with the other two events at the right one below the other using CSS Grid. Event start date with time and name will be overlayed at the bottom left of the event's featured image.

At smaller viewport widths, we shall show them one below the other with a smaller square images.

where the list of events is like this as on 19 Sep 2021 is:

Two methods are provided:

1. Easy Posts which uses the traditonal WP_Query PHP class.
2. Code Block which uses the tribe_get_events() function.

Easy Posts

Add a Section and inside that, an Easy Posts component.

Set the WP Query to advanced and edit the custom settings of the query.

Add the parameters like this: