September 11, 2023

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

Play Video

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.

Required Resources

JetAppointment Logo
Payment required
JetEngine Logo
Payment required
Elementor Logo
Free Options
Credit to Crocoblock
Crocoblock is a YouTube channel dedicated to providing tutorials, tips, and insights on WordPress and web design. With a focus on the Crocoblock suite of plugins and themes, the channel offers valuable content for WordPress enthusiasts, developers, and designers looking to enhance their skills and create websites with their tools. Through step-by-step tutorials, product overviews, and expert advice, Crocoblock helps its audience master the art of WordPress website building and customization.
Display User Appointments on the Front-End with JetEngine, JetAppointment & Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.