Display User Appointments on the Front-End with JetEngine, JetAppointment & Elementor

With this tutorial, you will learn how to display user appointments on your website’s front-end. With the help of JetEngine, JetAppointment, and Elementor, it’s set up in no time. Let’s get started and learn how.

1. Add some Test Appointments

Before we jump into the technical stuff, it’s always a good idea to have some test appointments in your system. It gives you a real-time feel of how things will look and function.

Tip: Always test new features in a staging environment first. This way, you can ensure everything works perfectly before going live.

2. Create the Appointment Listing

Navigate to JetEngine on your dashboard and select ‘listings’. Here’s where the magic begins:

1. Set your listing source to “user appointments”. This ensures we’re pulling the right data from JetAppointment.
2. Name your listing. Something descriptive helps, like “Frontend Appointments Display”.
3. Choose Elementor as your builder. It’s our trusty tool for this task.

Now, let’s add some dynamic fields to showcase the appointment details:

• ID: This is the unique identifier for each appointment. To make it user-friendly, prefix it with “ID-“. So, instead of just “1”, it’ll display as “ID-1”.
• user_name: Display the name of the person who made the appointment. Prefix it with “Name-” for clarity.
• provider: This is the service provider or professional the appointment is with. You can also make this a clickable link leading to the provider’s profile or page.
• service: Showcase the specific service booked, like “Spine Checkup” or “Dental Cleaning”.

3. Making Date and Time Shine

Dates and times can be tricky. They can appear as confusing strings if not formatted correctly. But with JetEngine, we can make them user-friendly:

• For the Date, use the format date callback. This transforms a date like “2023-08-04” to a more readable “August 4th, 2023”.
• For the Time, adjust the format to show hours, minutes, and whether it’s AM or PM. So, “09:00” becomes “9:00 AM”.

4. Bringing the Listing Grid to Life

With our listing crafted, it’s time to showcase it on a page:

1. On a new page, add the Listing Grid widget.
2. Select the appointment listing you created.
3. Adjust the query to display either upcoming or past appointments, depending on your preference.

Now, for some styling:

1. Set the column layout. Two columns usually offer a clean look.
2. Add a background color to make each listing stand out. A soft shade works wonders.
3. Throw in a box shadow. It adds depth and makes each listing pop.

Info: The box shadow not only adds an aesthetic touch but also improves user focus on each appointment detail.

5. Wrapping Up the “Display User Appointments Tutorial”

With a few steps and the power of JetEngine, JetAppointment, and Elementor, you’ve got user appointments shining on your front-end.

Tip: Always gather feedback from users. Small tweaks based on their experience can elevate the functionality and look of your appointment display.