How to Display Recurring Events in the Dynamic Calendar
The tutorial explains how to display repeated events via the Calendar widget of the JetEngine plugin with the needed frequency.
Before you start, check the tutorial requirements:
- Elementor (Free version) or Block editor (Gutenberg)
- JetEngine plugin installed and activated with the Calendar Module enabled
- JetThemeCore plugin installed and activated
Adding a Meta Box With the Advanced Date Field to a CPT
Create a CPT (here, Films) with the necessary fields.
Navigate to the JetEngine > Meta Boxes tab and create a new meta box. Unroll the Visibility Conditions block and select the required CPT from the Enable For Post Types drop-down menu. Unroll the Meta fields block and select the “Advanced Date” meta field option in the Field type drop-down menu for displaying the recurring events.
Save the meta box.
Open the CPT posts, scroll them down, and modify the following settings of the Advanced Date field of the meta box (here, Dates):
- Start date calendar field to select a date when the event starts;
- enable the Has end date toggle to select the end date for multi-day events;
- enable the Is recurring toggle to turn on the Repeat drop-down menu with the “Daily,” “Weekly,” “Monthly,” and “Yearly” options. Every option, if selected, turns on the appropriate fields to specify the displaying conditions. For example, the “Weekly” option turns on the buttons to select days of the week for displaying recurring events;
- End drop-down menu to select the “After” or “On date” options and specify the number of iterations or the end date, respectively.
Fill in the CPT posts and publish them.
Creating a Listing Item
Navigate to the JetEngine > Listings tab and create a listing item (here, Recurring_Events) for the developed CPT (Films) with the necessary dynamic fields to display.
To display the recurring dates, add the Dynamic Field widget and use the following settings:
- select the “Meta Data” option in the Source drop-down menu;
- select the previously created Advanced Date type meta field (“Dates”) in the “Meta Field” drop-down menu.
To display the dates correctly, scroll down the Calendar settings and enable the Filter field output toggle. Select the “Format date” option from the Callback drop-down menu.
Source: I Am Groot Disney+ Press Kit
Press the “Update” button.
Displaying the Recurring Events in the Calendar Widget
Navigate to the Crocoblock > Theme Parts tab and create a single page to display the CPT posts (Films).
Find the Calendar widget and drag-n-drop it to the page. Set the following settings for the Calendar widget:
- select the created listing item (here, Recurring_Events) from the Listing drop-down menu;
- select the “Date from custom field” option from the Group post by drop-down menu;
- fill in the Meta field name field with the Advanced Date field name (dates);
- activate the Allow multi-day events toggle for the event with previously activated Has end date toggle;
- the End date field name field does not need to be completed because the data will be automatically obtained from the source field.
Style the calendar.
Source: Disney+ Press Kits
The Calendar widget now displays recurring events on the front end.
Source: Disney+ Press Kits
That is all about using the Advanced Data field and the Calendar widget of the JetEngine plugin to display the repeated events with the needed frequency.