As you may already know, the JetEngine plugin for Elementor has recently been updated to v. 1.2.0. The CrocoBlock developers added more powerful features to it, the brand-new Dynamic Calendar widget being one of them.
Let’s have a closer look at the Calendar widget and see how it works.
Note! Before you use this widget, you have to enable it. You can easily do it by ticking the Calendar option in the JetEngine > JetEngine > Modules Manager tab. Click Save to preserve the changes.
Creating an Event Post Type
First, you have to create a custom post type with all the necessary custom meta fields (it is “Events” post type in our example, however, you can create any post type you need).
- Hover over the JetEngine menu option to reveal the submenu options. Click Post Types. Click the Add New button to create a new Post Type.
- In the General Information block, fill in the Name field with the name of this particular post type. Input the slug in the Slug field.
- Scroll down to the Menu Icon field. Choose a suitable icon for this particular custom post type. For example, a .dashicons-groups icon.
- Lower in the Supports field, you have to specify the data types which will be displayed for this particular post type, e.g., Title, Editor, Thumbnail.
- In the Meta Fields block, you can add as many meta fields as you want for all the necessary information. In case you want the Calendar widget to display the custom posts using the date you’ve manually set, it is essential to add a Date meta field. Input the title of the filed, specify its ID, and select the Date filed content type.
- Save the changes. Now you can see an extra post type in your WordPress Administration panel.
Creating a Listing Template to Show in Calendar
The next step is to create a listing template for the custom “Event” post type. Please, note, that before you use the Calendar grid widget, it’s better to have several events created. Also, please, add the dates for the events. You can specify them using the Date custom field.
- Browse JetEngine > Listings and click Add New to construct a new listing.
- In the Setup Listing Item select the Listing source: Post, From post type: Events and append a name to this listing in the Listing Item Name field. Click the Create Listing Item button and proceed to Elementor page builder.
- Scroll down to the Listing Elements block and add all the necessary dynamic widgets to the template.For one, you can add the Dynamic field to display the Title.
Afterwards, use the same widget to showcase the Date (in the Callback dropdown specify the Format date so that the date is displayed properly).
Then, drag and drop the Dynamic Image widget to showcase the event thumbnail.
Finally, add the Dynamic Field one more time to demonstrate the content.
- Save the changes.
Using Listing Calendar Widget
- Open the page to which you want to add a dynamic calendar and find the Listing Calendar widget. Drag and drop it to the page.
- In the Listing dropdown, pick the event listing.
- Select the Date from custom field alternative in the Group posts by dropdown.
- Fill in the Meta field name field. In our case, it’s “date”.
- Customize everything according to your taste. There are several Caption layouts and you can also set up widget visibility in the Widget Visibility block.
- Save the changes.
It may seem to take a lot of efforts and preparations to create an attractive calendar on your page, but it’s worth it!