{"id":9500,"date":"2019-06-03T13:47:46","date_gmt":"2019-06-03T13:47:46","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=9500"},"modified":"2024-04-17T11:30:45","modified_gmt":"2024-04-17T11:30:45","slug":"jetengine-calendar-listing-functionality-how-to-add-a-dynamic-calendar","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-calendar-listing-functionality-how-to-add-a-dynamic-calendar\/","title":{"rendered":"How to Create a Dynamic Calendar"},"content":{"rendered":"\n

The Calendar<\/strong> widget is perfect for displaying scheduled events and timetables, including repeated ones. It allows the usage of listings with meta fields of different types (texts, media, and more) and styles them in the Elementor page builder.<\/p>\n\n\n\n

Enable the Calendar Module<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard > JetEngine > Modules <\/em><\/strong>tab and enable the Dynamic Calendar<\/strong> toggle. Press the \u201cSave<\/strong>\u201d button.<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Create CPT with Date Meta Field<\/strong><\/h2>\n\n\n\n
\n

Proceed to JetEngine > Post Types<\/em><\/strong>, hit the \u201cAdd New<\/strong>\u201d button, and create a new Custom Post Type<\/strong><\/a> for events. Add the necessary meta fields. Add the Date<\/strong> meta field to this CPT \u2013 the events will be presented in the calendar according to the data from that field. Enable the Save as timestamp<\/strong> toggle. Save the CPT.<\/p>\n\n\n\n

\"cpt<\/a><\/div>\n\n\n
<\/svg><\/div>
Warning<\/div>

Make sure to enable the Save as timestamp<\/strong> toggle in the Data<\/strong> meta field. Otherwise, the events will not be displayed correctly in the calendar.<\/p><\/div><\/div>\n\n\n\n

Create CPT posts, fill them with data, and publish.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Listing Item<\/strong><\/h2>\n\n\n\n
\n

Go to JetEngine > Listings<\/em><\/strong>. Click the \u201cAdd New<\/strong>\u201d button and proceed to create a listing item for the built CPT. Add necessary meta fields to the item.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Source: Elemental Press Kit<\/a><\/p>\n<\/div><\/div>\n\n\n\n

Add the Calendar Widget to a Page<\/strong><\/h2>\n\n\n\n
\n

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<\/strong> widget to the appropriate spot on the page.<\/p>\n\n\n\n

\"calendar<\/a><\/div>\n\n\n\n

This widget has the following settings:<\/p>\n\n\n\n