Help Center

Knowledge base Plugins JetEngine How to Create a Dynamic Calendar

How to Create a Dynamic Calendar

From this tutorial, you will learn how to create a calendar that is automatically filled with events from the 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.

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

Create 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.

Warning

Be sure to enable the Save as timestamp toggle in the Data meta field. Otherwise, the events will not be displayed correctly in the calendar.

date meta field

Create Listing Template for 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 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

Add Calendar Widget to 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 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. You can pick the Query item creation date option if you want to display in the calendar such objects as users, comments, terms, and CCT items by the creation date. If such objects contain the Date meta field, use the Date from custom field option;
  • Allow multiday events. If you turn this toggle on, you will make it possible to add events that last for several days. More about this function you can learn from the How to Display One Post for Several Dates with Calendar Widget tutorial;
  • Use custom post types. Enable this toggle if you want to show posts from two or more different post types;
  • 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 the JetEngine plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.