Skip to main content

Showing upcoming events - using MB Views

Today, we're delving into a practical application of the MB Views extension from Meta Box on how to show upcoming events. It helps to highlight important dates and deadlines, making it easier for everyone to stay informed and participate.

Just events with the end date after the current day could be displayed. When each day passes, events that have ended will automatically disappear from the page.

The upcoming events section is created by MB Views.

Video version

Preparation

Assume that today is January 10th.

Assume that today isJanuary 10th.

We will filter and display the events that are either happening now or scheduled for the future. This signifies that an event with an end date beyond January 10th will be shown on the page.

An event with an end date beyond January 10th will be shown on the page.

In this case, each event will be a post of a custom post type. To store some typical information about the events, including dates, I’ll create some custom fields. The start date and the end date will be used for that filter.

Before going ahead, let’s prepare some necessary tools for this practice.

  • The Meta Box plugin: to have a framework to create a custom post type, custom fields, and a template for displaying the upcoming events;
  • MB Custom Post Type: to create a custom post type for the events;
  • MB Views: to create a template to display the upcoming events;
  • Meta Box Builder: to have a UI on the backend to create the custom fields visually.

And now, let’s start!

1. Creating a new post type

Go to Meta Box > Post Types to create a new post type for the events.

Create a new post type for the events.

2. Creating custom fields

Each event might include additional details. Then, we should use custom fields to store them; just create them as you go. These are some typical ones for this practice.

Some typical custom fields to store event information

Two of them, the start date and end date, are essential since they will be used for the filter.

Now, go to Meta Box > Custom Fields and create them.

Go to Meta Box > Custom Fields to create fields.

I’ll choose the Date Picker field type for both the start and end date of the event.

Choose the Date Picker field type for the start and end date of the event.

To show the date on the management dashboard for easy comparison with results, we should enable the field’s setting below. This feature is only visible when enabling the MB Admin Columns extension. While optional, it's a handy feature to have.

Turn on the button to show the date on the management dashboard.

After creating all the fields, go to the Settings tab. Choose Location as Post type, and select Event to apply these fields to this post type.

Set the location to apply these fields to the Event post type.

Then, in the post editor, you will see the created custom fields.

The created custom fields in the post editor.

Simply input data into them.

Here are some posts that I made, for example.

Some posts that I created for example.

The start date and the end date are shown as admin columns as well. You may want to see these ones once again in the end to easily compare them with the ones displayed on the page.

3. Creating a template to display all events on the page

In this step, I just want to show all the posts. It means all the events. For filtering the upcoming events, I’ll set a condition later.

Head over to Meta Box > Views to create a new template for the upcoming events section.

Go to Meta Box > Views to create a new template for the upcoming events section.

With MB Views, you can insert fields into the template by clicking the Insert Fields button, and choose any fields on the right sidebar to get data from them.

Insert fields into the template by clicking the Insert Fields button > choose any fields on the right sidebar to get data from them.

Or, you can also add some lines of code to the Template tab, like this:

Add some lines of code to the Template tab.

{% set args = { post_type: 'event', posts_per_page: -1 } %}
{% set posts = mb.get_posts( args ) %}
{% for post in posts %}
{% endfor %}

In there:

{% set args = { post_type: 'event', posts_per_page: -1 } %}

This line is to declare that we’ll get posts from the post type that has the event slug. And, -1 helps to get all posts in that post type. You can change it to get the expected number of posts.

{% set posts = mb.get_posts( args ) %}

We use the mb.get_posts function to get the posts.

As we have various posts, use a loop to display all of them.

{% for post in posts %}
{% endfor %}

For displaying the event's information, just use the button, as I said before. And then, insert some fields into the mentioned loop.

First, for the image of the event, choose the Post thumbnail field. You can choose a suitable image size to display.

For the image of the event, choose the Post thumbnail field.

Next, choose Post title to display the title of the event.

Choose Post title to display the title of the event.

Now, I want to show the start date, end date, and location, which are saved in the custom fields created with Meta Box. Find them in the list, then insert the fields as usual.

Look for the Event Information field group.

Meta Box also provides some options to set the output of the date. So, just set the one that fits your needs.

Meta Box also provides some options to set the output of the date.

Do the same to display the end date and location.

Display the end date and location.s

That’s all the information I want to show for the events.

I just keep the settings of the template’s type as Shortcode to display this template anywhere easier.

Keep the settings of the template’s type as shortcode to display this template anywhere easier.

Notice that you should copy the generated shortcode to use it later.

Copy this generated code to use it later.

Now, go to any place where you want to display the upcoming events, add the Shortcode block.

Add the Shortcode block.

Following this, insert the created shortcode into the box.

Paste the created shortcode in the box.

So, we’ve just finished getting all the posts of the Event post type. Again, I just specifically mentioned "all the posts".

Display all the posts of the event post type.

If you want to style the section, go back to the template and add some codes.

If you want to style the section, back to the template, add some codes.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

This is to call the Awesome font library in order to add icons for the start date, end date, and location.

You should also add some div tags and classes to style easily.

Add some div tags and classes to style easily.

Afterward, go to the CSS tab and add some codes. All of these codes are available on our GitHub channel, so you can refer to it for more details.

Go to the CSS tab and add some codes

Go to the frontend, the new look has been done.

The new look has been done.

To display only the upcoming events, we need to add a condition to filter those posts. So, let’s move on to the next step.

4. Adding condition to show only the upcoming events

Go back to the template, add the specific line of code to compare the end date with the current date. If the events have the end date after the current date, they could be displayed. So, add the following line of code inside the loop::

{% if post.end_date  >=  mb.date('Y-m-d') %}

Add the specific line of code to compare the end date with the current date.

In there:

  • post.end_date: to get the value of the End Date field;
  • mb.date('Y-m-d'): to get the value of the current date with its format;
  • >=: this operation is to get the events that have the end date after the current date.

On the frontend, you can see the upcoming events clearly. Just events have the end date after the current day, January 10, which I marked at the beginning could be displayed.

You can see the upcoming events clearly on the frontend.

To learn how to display posts based on specific criteria, check out our comprehensive guide. I hope you find it helpful!