Back to contents

JetEngine: How to Create a Dynamic Calendar

From this tutorial you will learn how to create a calendar, that is automatically filled with the events from specialized listing template using the JetEngine plugin.

The Calendar widget is perfect for displaying scheduled events and timetables. With its help, you can display calendar listings on your website and style them in the Elementor page builder. Let’s see how it works.

1 Step— Enable calendar module

First of all, open your website’s dashboard and go to JetEngine > JetEngine Dashboard > Modules, and tick the Calendar checkbox.

enabling calendar module

2 Step— Create a Custom Post Type for events

Proceed to JetEngine > Post Types, hit the “Add New” button and create a new Custom Post Type for events. You can call it however you like, for example – Events. For more information check out this CPT creation tutorial.

Events post type

You will need to add a Date Meta Field to this CPT – the events will be placed on the calendar according to the data from that field.

NOTE. Be sure to enable the Save as timestamp toggle in the Data meta field. Otherwise, the events won’t be displayed correctly in the calendar.
date meta field

3 Step— Create a Listing Template for the events

Move to the JetEngine > Listings. Click the “Add New” button and proceed to create a listing template. Here you can decide how the event will look like in the calendar cell. The layout you build here will afterward be displayed in the cell of the calendar. You can add pictures or colored background there – it is up to you. If you need a hint – follow the instructions given in this Listing Template creation tutorial.

event listing creation

4 Step— Add the Calendar widget to the page

Now, open the page or post, where you would like to show the dynamic calendar with the events, in the Elementor page builder. Find and drop the Calendar widget in an appropriate space on the page.

Calendar widget

You will see the settings menu of the widget on the left. Let’s go through the features:

  • Listing. In this drop-down menu, you have to select the created listing template;
  • Group posts by field. This feature defines how the events will be placed in the calendar. If you will choose Post publication date or Post modification date every event will be placed in the calendar cell that corresponds to the date of creation or modification of that event. So, you have to select the Date from custom field option and input the Date meta field name to the Meta field name text area;
  • Allow multiday events. If you will turn this toggle on, you will make it possible to add events that last for several days;
  • Weekday format. In this drop-down list you can select the way the weekday names will be displayed;
  • Start from custom month. By default, the calendar opens on the current year and month. After enabling this toggle you can choose any other month of any other year to show first;
  • Show posts from the nearby month. This toggle enables showing the events that happened or are going to happen in the nearby month;
  • Hide past events. If you don’t want to display all the events that have already come to an end – turn this toggle on.
Calendar widget general settings

Now, go to Content > Widget Visibility block. Here you can choose whether the calendar will be always visible or hidden when the query is empty. Select the appropriate option from the dropdown in the Hide widget if field. If you want to show the widget permanently, choose the Always show option. In case it is necessary to hide it when the posts query is empty you need to choose the Query is empty option.

listing calendar visibility

When you are done with customizations – proceed to the Style tab and change the appearance of the calendar according to your taste. In the end, click the “Update” button and take a look at the calendar on the page. It can look like that, for example:

Calendar example

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