Mehrere Buchungsmasken auf einer Inhaltsseite:

1. Erstelle eine Buchungsmaske mit allen Leistungen, die auf der Seite gebucht werden können
   Achte darauf:
   • Das die Buchungsmaske nicht sichtbar ist (eigenen Button verwenden)
   • Das die Auswahl Mitarbeiter wählen nicht erfolgen soll
   • Schritte anzeigen: Nein
2. Binde die Buchungsmaske auf der Seite ein
3. Erstelle nun die Buttons, die per Klick die Buchungsmaske laden und Termine zeigen sollen
   Beispiel: Termine anzeigen
   Der Wert bei data-id muss manuell angepasst werden. Dies ist die ID der Leistung, die gewählt werden soll.
   Beispiel:
   <a href="#" class="booking select-booking-option" data-id="5">Termine anzeigen</a>
   
   
4. Füge auf der Webseite einmal folgenden Code ein. (Bitte spitze Anfangsklammer zum script-Tag hinzufügen)

script>
jQuery(document).ready(function($) {
$(document).on('click', '.select-booking-option', function(e) {
e.preventDefault();
let selectValue = $(this).attr('data-id');
$('.b2m-app').find('#event_name').val(selectValue).change(); }); });
/script>

Sollte dann so aussehen:

Fertig.

Hier muss nun manuell die ID der Dienstleistungsgruppe bei data-id eingetragen werden.

Und folgenden Code (aktualisiert in 2026) nur einmal auf der Seite einbinden:

<script>
jQuery(document).ready(function ($) {
$(document).on('click', '.show-booking-group', function(e){
e.preventDefault();
let event_groups = $('.b2m-app').find('#event_name');
event_groups.val('');
$('#selected-data').hide();
event_groups.find('optgroup').show();
$('.b2m-step-line').find('>li:first-of-type').click();
let groupId = $(this).attr('data-id');

event_groups.find('optgroup').hide();
event_groups.find('optgroup[id="'+groupId+'"]').show();
});
});
</script>

Wie zuvor in der Buchungsmaske alle Leistungen anzeigen lassen.

Damit werden nur die Leistungen der gewünschten Gruppe in der Auswahlliste angezeigt.