Back to contents

JetEngine Calendar Listing functionality. How to add a dynamic calendar

This tutorial describes one of the most useful features of JetEngine plugin, the dynamic calendar based on dynamic listing templates.

Calendar is perfect for displaying scheduled events and timetables. Display calendar listings on your website and style them with Elementor. Let’s see how it works.

Adding a dynamic calendar

Step 1 – First of all, go to JetEngine > JetEngine > Modules Manager in the WP Dashboard and enable the Calendar option.

enabling-calendar-option

Step 2 – Then, you can prepare a custom post type in JetEngine > Post Types block to add events to the calendar.

events-custom-post-type

Step 3 – The next necessary thing you need to do is to create a listing template in JetEngine > Listings. E.g., in our case there is the Events custom post type, that’s why we specify the Listing source: Posts and pick Posts option in the From post type field.

calendar-listing

Step 4 – In Elementor editor use JetEngine widgets for displaying dynamic content from the events using the custom fields and meta boxes. E.g., with Dynamic Field widget you can pull the name of the event, time and date; using Dynamic Image widget you will pull the image of the event. Customize the appearance of the elements according to your vision and save the changes.

dynamic-content-in-the-listing

Step 5 – Now, open the certain page or template, where you would like to show the dynamic calendar with the events, in Elementor and drop the Calendar widget in an appropriate space on the page.

Ajax Serch Widget

Step 6 – You will see the customizable settings of the widget on the left. Here you need to select the created listing, select the Date from custom field option in the Group posts by field and input the Date meta field name. Also, you can specify the weekday format, set advanced query parameters if you want to display only specific events and adjust widget visibility.

content-listing-calendar

Moreover, in Style tab you will find a lot of settings for styling the widget.

style-settings-listing-calendar

Step 6 – When everything is customized the right way, click Update and take a look at the calendar on the page.

listing-calendar-on-the-page

Now you know how to add a dynamic calendar with JetEngine plugin. Go try it yourself!