How to Display Bookings Dynamically in a Calendar

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.

• Tools tab: create a new column to store users’ data (the user_data column for this tutorial) for further query requests.

Press the “Update Booking Tables” button.

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.

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.

Press the “Add Query” button to save it.

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

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

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

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.

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.

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.

Press the “Update” button.