User documentation

  1. Home
  2. User documentation
  3. Display Pack
  4. Display the event participants on the frontend

Display the event participants on the frontend

You can display the event participants list when you mouseover hover the event (or on mobile, with a long press), just like it does on the backend “Bookings” page.


Display the participants list

  • Go to Booking Activities > Booking forms
  • Select the desired booking form
  • Go to the “Calendar” field settings > “Display” tab
  • Activate the “Display booking list” option
  • Add / Remove the desired columns in the “Booking list columns” option
  • Validate the dialog
Display the events participants list on the frontend

Now, when you mouseover an event on this form, or on touch devices when you long press an event, a tooltip will display the event bookings list, with the desired columns.


Merge both tooltips

You can also integrate this list in the event info tooltip so that only one tooltip is displayed instead of two:

  • Turn ON both otpions “Display event info” AND “Display booking list”
    • Note: both options must be active to make the tag work
  • Go to Booking Activities > Calendar Editor
  • Go to the desired activity / event / group / group category > “Text” tab
  • Add the {booking_list} tag wherever you want in the “{…} information” field
  • Validate the dialog

The booking list will be displayed where the tag is instead of being displayed in a dedicated tooltip.


Allow to display private data

In order to display the participants list, you will need to display columns such as “First name”, “Last name”, etc., however these are privates data. A protection will prevent them from being displayed to whomever is not allowed. You can remove that protection, but this is strongly discouraged:

  • Go to Booking Activities > Settings > “General” tab
  • Activate the “Allow private columns in frontend booking lists” option
  • Save changes
Allow private columns to be displayed (not recommanded)

Good practice : define which columns should be private, and create new columns that don’t compromise privacy using the API. For example, the demo site allows the “First name” column, and creates a column showing only the initial of the last name (demo). You will find the code below for reference:

function my_theme_allow_first_name_column( $private_columns ) {
	$key = array_search( 'customer_first_name', $private_columns, true );
	if( $key !== false ) { unset( $private_columns[ $key ] ); }
	return array_values( $private_columns );
add_filter( 'bookacti_user_booking_list_private_columns', 'my_theme_allow_first_name_column', 10, 1 );

function my_theme_add_user_booking_list_columns( $columns ) {
	$columns[ 'customer_last_name_short' ] = 'Last name (private)';
	return $columns;
add_filter( 'bookacti_user_booking_list_columns_labels', 'my_theme_add_user_booking_list_columns', 20, 1 );

function my_theme_fill_user_booking_list_new_columns( $values, $booking, $group, $grouped_bookings, $user, $filters, $columns ) {
	$values[ 'customer_last_name_short' ] = $values[ 'customer_last_name' ] ? strtoupper( substr( trim( $values[ 'customer_last_name' ] ), 0, 1 ) ) . '.' : '';
	return $values;
add_filter( 'bookacti_user_booking_list_item', 'my_theme_fill_user_booking_list_new_columns', 10, 7 );

You can add this code in your child theme functions.php, or with a plugin such as Code Snippets.

How can we help?