How to Filter Events in the Calendar Widget with the Date Range Filter

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 the JetEngine plugin to create a calendar. Now, let’s dive into the process.

Filtering the Events from the Dynamic Calendar

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

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

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.

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

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.

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

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.

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

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 last changed this post. And the Date from the custom field will display posts on the dates that are set in the custom field.

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

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.

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

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