Help Center

How to Display Bookings Dynamically in a Calendar

How to Display Bookings Dynamically in a Calendar

The tutorial explains how to dynamically display the booking data obtained by JetFormBuilder forms via the Calendar widget.

Before you start, check the tutorial requirements:

  • Elementor (Free version) and Block Editor (Gutenberg)

  • JetEngine plugin installed and activated with post type with posts created, and the Calendar Module enabled

  • JetBooking plugin installed and activated

  • JetThemeCore plugin installed and activated

  • JetFormBuilder plugin installed and activated with a booking form created

Settings of the JetBooking plugin

Navigate to the Bookings > Settings tab and adjust the following settings:

  • General tab:
    • select the “Plain” option in the Booking mode drop-down menu;
    • select the CPT (“Properties” for this tutorial) in the Booking instance post type drop-down menu.
general tab of the booking settings
  • Tools tab: create a new column to store users’ data (the user_data column for this tutorial) for further query requests.
column tab of booking settings

Press the “Update Booking Tables” button.

JetEngine Query Settings

Unroll the JetEngine > Query Builder tab and press the “Add New” button to build a new query. Type the query’s name (here, “Query for bookings”) into the Name field and select the “JetBooking Query” option from the Query Type drop-down menu.

Navigate to the General tab and select the necessary status of bookings for displaying (i.e., on-hold, pending, etc.) from the Status drop-down menu.

general tab of the booking settings

To specify the column for users’ data storage, navigate to the Column Query tab of the JetBooking Query settings and select the column’s name from the Column drop-down menu.

column query settings

Press the “Add Query” button to save it.

Getting Booking Data

Set the JetBooking form’s block associated with the collected users’ data: select the Apartment Booking option of the Post Submit Actions and select the form’s field to record the users’ data into the added column (here, user_data).

jetform post submit settings

Add the form to a single page of the CPT post.

 the form added to the single page

After submitting the form, all booking data will be collected by the JetBooking plugin in the Bookings > Bookings tab.

booking data collected

Listing Item Settings

Navigate to the JetEngine > Listings tab and press the “Add New” button to create a listing item with the following settings:

  • select the “Query Builder” option from the Listing source drop-down menu;
  • select the necessary query from the Query drop-down menu (here, “Query for bookings”);
  • set the listing item’s name in the Listing item name field;
  • select the editor from the Listing view drop-down menu.
listing item settings

Press the “Create Listing Item” button.

Add the necessary fields to the listing item. For this tutorial, we added the following booking data: the booking ID, check-in and check-out dates, and the booking instance ID.Find, drag, and drop the Dynamic Field widget and place it in the listing item. Select the “Post/Term/User/Object Data” option from the Source drop-down menu and select the necessary booking data (i.e., the booking ID, check-in and check-out date, or the booking instance ID) that can be found under the “JetBooking” options in the Object Field drop-down menu.

dynamic field settings

To display the data in the necessary format, activate the Filter field output toggle and select the format option from the Callback drop-down menu.

To add the booking to the Google Calendar, add the Dynamic Link widget and select the “JetBooking: Add booking to Google Calendar” option from the Source drop-down menu.

dynamic link settings

Press the “Update” button.

Displaying Bookings in the Calendar Widget

Create a new single page. Navigate to the page settings (the wheel icon in the left bottom corner), unroll the Preview Settings tab, and select the CPT (here, “Properties”) in the Post Type drop-down menu.

single page settings

Press the “Update” button.

Find the Calendar widget and drag and drop it to a single page. Select the built listing item from the Listing drop-down menu and the “Booking date” option from the Group posts by field.

dynamic calendar listing settings

Unroll the Custom Query tab and enable the Use Custom Query toggle. This toggle turns on the Custom Query drop-down menu to select the necessary query (here, “Query_for_bookings”).

dynamic calendar query settings

Update the single page and check the сalendar on the front end.

Pressing the “Add to Google Calendar” link adds the booking to the Google Calendar.

google calendar settings

That’s all about displaying booking data via the JetEngine Calendar widget.

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.