Appointment Hour Booking Blog

The easy way to create powerful booking forms for WordPress websites.

Blog / How to display lists of bookings in the frontend?

How to display lists of bookings in the frontend?

The Appointment Hour booking plugin has both built-in shortcodes and add-ons to display different lists of bookings into the frontend pages of the website.


The first type of lists are classic lists that can be displayed by using this shortcode in the page where you want to display the list:

[CP_APP_HOUR_BOOKING_LIST]

... it can be also customized with some parameters if needed, example:

[CP_APP_HOUR_BOOKING_LIST from="today" to="today +30 days" fields="DATE,TIME,email" calendar="1"]

... the "from" and "to" are used to display only the appointments / bookings on the specified period. That can be either indicated as relative days to "today" or as fixed dates.

The styles for the list are located at the end of the file "css/stylepublic.css" but you can easily overwrite them from the CSS customization area:

.cpabcfield0, .cpabcfield1, .cpabcfield2, ...

The result will be a list like the following:

classic bookings list

To display only the bookings of the user currently logged in you can add the parameter onlycurrentuser="yes" to the above shortcode.

To display only the bookings of the an user filtering by the email address (only commercial versions of the plugin) add the parameter email="sample@emailaddress.com" to the above shortcode.

In the "fields" attribute you can define the columns, valid values are:

- itemnumber: Request ID.
- DATE: Appointment date.
- TIME: Appointment time.
- email: Email address.
- rownumber: Consecutive number of the row in the displayed list.
- weekday: Appointment weekday (Sunday, Monday, ...).
- final_price: Total cost.
- fieldname1, fieldname2, ...: Data entered on each field.


The other type of lists are lists of bookings grouped by the booking date, this way the schedule can be easier to read. This type of bookings will look like in the following image:

grouped bookings list


To get this type of grouped list the first step is to enable the "Frontend List: Grouped by Date Add-on" in the list of addons:

enabling lists add-on


When done go to the booking form settings and into the "add-ons" step you can copy the shortcode to display the list. Just copy & paste that shortcode into a post or page:

bookings list shortcode


The shortcode has the following attributes to customize the list:

- calendar: The ID of the booking form to lists its bookings

- datelabel: The label used for the date. Remember that the bookings will be grouped by date in this type of list, adding the date to the top of the group.)

- columnlabels: Labels for the different data columns in the list.

- columns: Data columns in the list. You can get the fields ID into the form builder to select exactly which info display into the list.

- onlycurrentuser: Set to yes if you want to display only the bookings of the user currently logged in.

In addition to that the list styles/colors can be customized using the CSS styles referred into the add-on settings.

Feedback about these features will be welcome, feel free to open a support ticket for any question.