Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetSmartFilters: How to Filter Events in Calendar Widget

This tutorial explains what steps you have to take in order to filter events from the Calendar widget with the help of JetSmartFilters and JetEngine plugins.

Create a stylish Calendar with the help of JetEngine plugin and filter events from it using the Date Range filter. You can display all your events in the calendar dynamically and style them up according to your taste.

Also, you’re able to filter your events, so it will be easy to find the needed one just in a few clicks.

This tutorial will teach you how to filter the events from the dynamic calendar. Note, that you will need JetEngine plugin to create a calendar. Now, let’s dive into the process!

Filtering the events from the Dynamic calendar

Step 1 — Firstly, open your WordPress Dashboard and navigate to JetEngine > JetEngine > Modules Manager, then enable the Calendar widget and save the changes.

Available Modules in the JetEngine Dashboard

Step 2 — After that, go to Smart Filters > Add New. Here you need to type in the Name, Filter Label, and Active Filter Label.

Filter Labels settings for the Date Range filter

Then, select Date Range from the Filter Type dropdown, and choose Filter by Meta Date option. If you want to showcase the publication date, then you need to choose the Post Date.

In my case, I choose the Meta Date. Then, in the Query Variable field, you’ll need to paste the field key from the Custom Field. You can find the key in the Custom Post Type that you’ve created before.

Filter and Query settings

Also, you can learn more about Custom Post Type and how to create it in this tutorial.

Step 3 — In my Custom Post that is named “Events”, I’ve got the number of posts with events, and each of these posts got the custom field with the Date.

Open the needed post and in the Settings section, you’ll see the field “Date” with the date of the event.

you’ll see the field “Date” with the date of the event

Copy the Name of the event (for me it’s “date-”) and then paste it in the Query Variable field in the filter you’ve been created. Then, click on the Publish button.

Filter and Query settings for the Date Range filter

Step 4 —The next step is to open the page where you want to add the calendar, and drag-n-drop the Calendar widget to the section.

Step 5 — Afterward, in the Listing dropdown select the listing you’ve created for your events.

Listing dropdown in the general settings in Calendar widget

You can learn more about Listing and how to create it from this tutorial.

Then, you can choose the criteria by which you want to Group posts. If you choose Posts publication date, it will display this post on the day when it was created. Post modification date will do the same, but it’s going to display posts based on the day when you have last changed this post. And the Date from the custom field will display posts on the dates that are set in the custom field.

General settings in Calendar widget

I choose the Date from the custom field and in the Meta field name paste the Name of the meta field “date-”.

General settings in Calendar widget

Step 6 — The last step here is to find the Date Range Filter and drop it to the needed section. Choose your filter in the General settings section and select the JetEngine Calendar from the This Filter for section.

Content settings in Date Range Filter

Step 7 — When you’re done with all customization click on the Publish button and try how the filter works.

Filtering events from the Calendar Preview

Great job! Now you know how to filter the events from the Calendar using JetSmartFilters and JetEngine plugins.