{"id":10616,"date":"2020-05-08T17:42:24","date_gmt":"2020-05-08T15:42:24","guid":{"rendered":"https:\/\/booking-activities.fr\/fr\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/display-the-event-participants-on-the-frontend\/"},"modified":"2024-06-17T10:22:55","modified_gmt":"2024-06-17T08:22:55","slug":"display-the-event-participants-on-the-frontend","status":"publish","type":"docs","link":"https:\/\/booking-activities.fr\/en\/docs\/user-documentation\/get-started-with-display-pack-add-on\/display-the-event-participants-on-the-frontend\/","title":{"rendered":"Display the event participants on the frontend"},"content":{"rendered":"<p>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 &#8220;Bookings&#8221; page.<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"display-participants-list\">Display the participants list<\/h3>\n<ul>\n<li>Go to Booking Activities > Booking forms\n<li>Select the desired booking form\n<li>Go to the &#8220;Calendar&#8221; field settings > &#8220;Display&#8221; tab\n<li>Activate the &#8220;Display booking list&#8221; option\n<li>Add \/ Remove the desired columns in the &#8220;Booking list columns&#8221; option\n<li>Validate the dialog\n<\/ul>\n<figure id=\"attachment_10377\" aria-describedby=\"caption-attachment-10377\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" width=\"480\" class=\"size-full wp-image-10377 lazyload\" \/><figcaption id=\"caption-attachment-10377\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" src=\"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png\" alt=\"\" width=\"480\" class=\"size-full wp-image-10377\" srcset=\"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png 717w, https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options-300x180.png 300w, https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options-150x90.png 150w\" sizes=\"(max-width: 717px) 100vw, 717px\" \/><\/noscript> Display the events participants list on the frontend<\/figcaption><\/figure>\n<p>Now, when you <strong>mouseover an event<\/strong> on this form, or on touch devices when you <strong>long press<\/strong> an event, a tooltip will display the <strong>event bookings list<\/strong>, with the <strong>desired columns<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"merge-tooltips\">Merge both tooltips<\/h3>\n<p>You can also <strong>integrate this list in the event info tooltip<\/strong> so that only one tooltip is displayed instead of two:<\/p>\n<ul>\n<li>Turn ON both otpions &#8220;Display event info&#8221; <strong><u>AND<\/u><\/strong> &#8220;Display booking list&#8221;\n<ul>\n<li><strong>Note:<\/strong> both options must be active to make the tag work\n\t<\/ul>\n<li>Go to Booking Activities > Calendar Editor\n<li>Go to the desired activity \/ event \/ group \/ group category > &#8220;Text&#8221; tab\n<li>Add the <strong>{booking_list}<\/strong> tag wherever you want in the &#8220;{&#8230;} information&#8221; field\n<li>Validate the dialog\n<\/ul>\n<p>The booking list will be displayed where the tag is instead of being displayed in a dedicated tooltip.<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"display-private-data\">Allow to  display private data<\/h3>\n<p>In order to display the participants list, you will need to display columns such as &#8220;First name&#8221;, &#8220;Last name&#8221;, etc., however <strong>these are privates data<\/strong>. A protection will prevent them from being displayed to whomever is not allowed. You can remove that protection, but this is <strong style=\"color:red;\">strongly discouraged<\/strong>:<\/p>\n<ul>\n<li>Go to Booking Activities > Settings > &#8220;General&#8221; tab\n<li>Activate the &#8220;Allow private columns in frontend booking lists&#8221; option\n<li>Save changes\n<\/ul>\n<figure id=\"attachment_10391\" aria-describedby=\"caption-attachment-10391\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/booking-activities.fr\/wp-content\/uploads\/allow-private-columns-option.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" width=\"640\" class=\"size-full wp-image-10391 lazyload\" \/><figcaption id=\"caption-attachment-10391\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" src=\"https:\/\/booking-activities.fr\/wp-content\/uploads\/allow-private-columns-option.png\" alt=\"\" width=\"640\" class=\"size-full wp-image-10391\" srcset=\"https:\/\/booking-activities.fr\/wp-content\/uploads\/allow-private-columns-option.png 848w, https:\/\/booking-activities.fr\/wp-content\/uploads\/allow-private-columns-option-300x96.png 300w, https:\/\/booking-activities.fr\/wp-content\/uploads\/allow-private-columns-option-150x48.png 150w, https:\/\/booking-activities.fr\/wp-content\/uploads\/allow-private-columns-option-768x245.png 768w\" sizes=\"(max-width: 848px) 100vw, 848px\" \/><\/noscript> Allow private columns to be displayed (not recommanded)<\/figcaption><\/figure>\n<p><strong style=\"color:green;\">Good practice\u00a0:<\/strong> <strong>define which columns should be private, and create new columns that don&#8217;t compromise privacy using the API.<\/strong> For example, the demo site allows the &#8220;First name&#8221; column, and creates a column showing only the initial of the last name (<a href=\"https:\/\/demo.booking-activities.fr\/en\/shortcodes-integration\/#booking-form\" rel=\"noopener noreferrer\" target=\"_blank\">demo<\/a>). You will find the code below for reference:<\/p>\n<pre style=\"max-height:200px;overflow-y:auto;\"><code>function my_theme_allow_first_name_column( $private_columns ) {\r\n\t$key = array_search( 'customer_first_name', $private_columns, true );\r\n\tif( $key !== false ) { unset( $private_columns[ $key ] ); }\r\n\treturn array_values( $private_columns );\r\n}\r\nadd_filter( 'bookacti_user_booking_list_private_columns', 'my_theme_allow_first_name_column', 10, 1 );\r\n\r\nfunction my_theme_add_user_booking_list_columns( $columns ) {\r\n\t$columns[ 'customer_last_name_short' ] = 'Last name (private)';\r\n\treturn $columns;\r\n}\r\nadd_filter( 'bookacti_user_booking_list_columns_labels', 'my_theme_add_user_booking_list_columns', 20, 1 );\r\n\r\nfunction my_theme_fill_user_booking_list_new_columns( $values, $booking, $group, $grouped_bookings, $user, $filters, $columns ) {\r\n\t$values[ 'customer_last_name_short' ] = $values[ 'customer_last_name' ] ? strtoupper( substr( trim( $values[ 'customer_last_name' ] ), 0, 1 ) ) . '.' : '';\r\n\treturn $values;\r\n}\r\nadd_filter( 'bookacti_user_booking_list_item', 'my_theme_fill_user_booking_list_new_columns', 10, 7 );<\/code><\/pre>\n<p>You can add this code in your <strong>child theme<\/strong> <code>functions.php<\/code>, or with a plugin such as <strong><a href=\"https:\/\/fr.wordpress.org\/plugins\/code-snippets\/\" rel=\"noopener noreferrer\" target=\"_blank\">Code Snippets<\/a><\/strong>.<\/p>","protected":false},"featured_media":0,"parent":617,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"_is_vendor_doc":"0","footnotes":""},"doc_tag":[],"class_list":["post-10616","docs","type-docs","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Display the event participants on the frontend - Booking Activities<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Display the event participants on the frontend - Booking Activities\" \/>\n<meta property=\"og:description\" content=\"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 &#8220;Bookings&#8221; page. &nbsp; ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/\" \/>\n<meta property=\"og:site_name\" content=\"Booking Activities\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-17T08:22:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/\",\"name\":\"Display the event participants on the frontend - Booking Activities\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/fr\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/booking-activities.fr\\\/wp-content\\\/uploads\\\/badp-frontend-event-bookings-tooltip-options.png\",\"datePublished\":\"2020-05-08T15:42:24+00:00\",\"dateModified\":\"2024-06-17T08:22:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[[\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/\"]]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/#primaryimage\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/wp-content\\\/uploads\\\/badp-frontend-event-bookings-tooltip-options.png\",\"contentUrl\":\"https:\\\/\\\/booking-activities.fr\\\/wp-content\\\/uploads\\\/badp-frontend-event-bookings-tooltip-options.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/afficher-les-participants-a-un-evenement-sur-le-frontend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation utilisateur\",\"item\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Display Pack\",\"item\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Afficher les participants \u00e0 un \u00e9v\u00e8nement sur le frontend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/\",\"name\":\"Booking Activities\",\"description\":\"Booking plugin for Wordpress websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#organization\",\"name\":\"Booking Activities\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/wp-content\\\/uploads\\\/Logo_Booking_Activities_light_bg.png\",\"contentUrl\":\"https:\\\/\\\/booking-activities.fr\\\/wp-content\\\/uploads\\\/Logo_Booking_Activities_light_bg.png\",\"width\":512,\"height\":83,\"caption\":\"Booking Activities\"},\"image\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Display the event participants on the frontend - Booking Activities","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/","og_locale":"en_US","og_type":"article","og_title":"Display the event participants on the frontend - Booking Activities","og_description":"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 &#8220;Bookings&#8221; page. &nbsp; ...","og_url":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/","og_site_name":"Booking Activities","article_modified_time":"2024-06-17T08:22:55+00:00","og_image":[{"url":"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/","url":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/","name":"Display the event participants on the frontend - Booking Activities","isPartOf":{"@id":"https:\/\/booking-activities.fr\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/#primaryimage"},"image":{"@id":"https:\/\/booking-activities.fr\/fr\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png","datePublished":"2020-05-08T15:42:24+00:00","dateModified":"2024-06-17T08:22:55+00:00","breadcrumb":{"@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":[["https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/"]]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/#primaryimage","url":"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png","contentUrl":"https:\/\/booking-activities.fr\/wp-content\/uploads\/badp-frontend-event-bookings-tooltip-options.png"},{"@type":"BreadcrumbList","@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/afficher-les-participants-a-un-evenement-sur-le-frontend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/booking-activities.fr\/en\/"},{"@type":"ListItem","position":2,"name":"Documentation utilisateur","item":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/"},{"@type":"ListItem","position":3,"name":"Display Pack","item":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/"},{"@type":"ListItem","position":4,"name":"Afficher les participants \u00e0 un \u00e9v\u00e8nement sur le frontend"}]},{"@type":"WebSite","@id":"https:\/\/booking-activities.fr\/en\/#website","url":"https:\/\/booking-activities.fr\/en\/","name":"Booking Activities","description":"Booking plugin for Wordpress websites","publisher":{"@id":"https:\/\/booking-activities.fr\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/booking-activities.fr\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/booking-activities.fr\/en\/#organization","name":"Booking Activities","url":"https:\/\/booking-activities.fr\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/booking-activities.fr\/en\/#\/schema\/logo\/image\/","url":"https:\/\/booking-activities.fr\/wp-content\/uploads\/Logo_Booking_Activities_light_bg.png","contentUrl":"https:\/\/booking-activities.fr\/wp-content\/uploads\/Logo_Booking_Activities_light_bg.png","width":512,"height":83,"caption":"Booking Activities"},"image":{"@id":"https:\/\/booking-activities.fr\/en\/#\/schema\/logo\/image\/"}}]}},"comment_count":0,"_links":{"self":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/10616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/comments?post=10616"}],"version-history":[{"count":5,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/10616\/revisions"}],"predecessor-version":[{"id":35928,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/10616\/revisions\/35928"}],"up":[{"embeddable":true,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/617"}],"prev":[{"title":"[:fr]Param\u00e9trer l'affichage des calendriers[:en]Set up calendars display[:]","link":"https:\/\/booking-activities.fr\/en\/docs\/user-documentation\/get-started-with-display-pack-add-on\/set-up-calendars-display\/","href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/182"}],"wp:attachment":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/media?parent=10616"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/doc_tag?post=10616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}