{"id":18715,"date":"2020-04-30T17:31:24","date_gmt":"2020-04-30T17:31:24","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=18715"},"modified":"2024-07-16T11:13:06","modified_gmt":"2024-07-16T11:13:06","slug":"jetappointment-how-to-display-appointments-with-the-listing-grid-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/jetappointment-how-to-display-appointments-with-the-listing-grid-widget\/","title":{"rendered":"How to Display User Appointments with the Listing Grid Widget"},"content":{"rendered":"\n

Getting Started<\/h2>\n\n\n\n
\n

To ensure everything works properly on the front end, pay attention to the back-end preparations. You\u2019ve got to have Appointments <\/strong>set up; if you haven\u2019t done it yet, check out the How to Manage Appointments from the WordPress Dashboard<\/a> tutorial.<\/p>\n\n\n\n

Also, make sure that you have some booked appointments on your website.<\/p>\n\n\n\n

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

Create a Listing for Appointments<\/strong><\/h2>\n\n\n\n
\n

Create a new listing item<\/strong><\/h3>\n\n\n\n

Initially, navigate to the WordPress Dashboard ><\/em><\/strong> JetEngine > Listings\/Components<\/em><\/strong> tab and click the “Add New Listing Item<\/strong>” button to create a new listing. You\u2019ll see a Setup Listing Item<\/strong> pop-up.
Pick the “User Appointments” option as a Listing source<\/strong>. Then, enter the Listing item name<\/strong> of your choice (in the given case, the “Medical Treatment Listing Item”), choose the Listing view<\/strong> (we’re going to use Elementor, but you can opt for Gutenberg blocks or the Bricks theme), and click the “Create Listing Item<\/strong>” button.<\/p>\n\n\n\n

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

Read the Listing Template in Elementor Overview<\/a> to learn how to create a listing item.<\/p>\n\n\n\n

Right afterward, you\u2019ll be redirected to Elementor.<\/p>\n\n\n\n

Build the listing in Elementor<\/strong><\/h3>\n\n\n\n

Now, search for the Dynamic Field<\/strong> widget.<\/p>\n\n\n\n

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

The How to Create Listing Template for Post Types in Elementor<\/a> tutorial details how to create listing items using the dynamic widgets.<\/p>\n\n\n\n

Drag and drop this widget to the working area. Add the needed widgets to create the listing. In the given case, we added the Dynamic Field<\/strong> widgets to display the following fields: <\/p>\n\n\n\n