Deprecated for Update 9.8 or newer

In Booking Calendar Business Large or higher versions possible to define capacity for booking resources (calendars), for ability to receive several bookings for the same date(s) in the same calendar (booking resource).

Please read more about it here.
You can test it in the live demo.
Watch video about this feature here.
And we highly recommend, to check this article about configuration of capacity and availability for booking resources.

Its means that during the booking process, user can book several "child booking resources" and deduct availability for selected date on number of booked "child booking resources". This number (how many items to book), can depend only from the number of visitors selection in the booking form at the Booking > Settings > Form page:

Visitors: [select visitors class:visitors "1" "2" "3" "4" "5" "6"]

Its often require to make such deduction of availability based on 2 parameters - selection of "adults" and "children" number.
In this case possible to make this JavaScript customization in the booking form, for automatic selection of specific number of visitors, depend from the selection of number of "adults" and "children" in booking form.
Example of configuration:

<p class="wpbc_visitors_selection">Visitors: [select visitors class:visitors "1" "2" "3" "4" "5" "6"] </p>
<p>Adults: [select adults class:adults "1" "2" "3"]</p>
<p>Children: [select children class:children "0" "1" "2" "3"]</p>
<script type="text/javascript">
   	jQuery( 'select.adults').on( 'change',  wpbc_set_visitors_number );
   	jQuery( 'select.children').on( 'change',  wpbc_set_visitors_number );
	function wpbc_set_visitors_number() {
		var s_adults   = jQuery('select.adults option:selected').val();
		var s_children = jQuery('select.children option:selected').val();
		var s_visitors = parseInt(s_adults) + parseInt(s_children);
console.log( s_visitors );
                jQuery('select.visitors option[value=' + s_visitors + ']').prop({selected: true});
		var bk_type = jQuery( "input[name^='bk_type']" ).val();
		if (typeof(showCostHintInsideBkForm) == 'function') {
		      showCostHintInsideBkForm( bk_type );
		}
	}
</script>

This code available for testing purpose. In case, if you need to hide the visitors selection (to have only adults and children selection) as visible option, so then please use this code:

<style type="text/css">
	.wpbc_visitors_selection select {
		width: 1px;
		height: 1px;
		border: none;
		margin: 0;
		padding: 0;
		display: inline;
	}
</style>
<p class="wpbc_visitors_selection">[select visitors class:visitors "1" "2" "3" "4" "5" "6"] </p>
<p>Adults: [select adults class:adults "1" "2" "3"]</p>
<p>Children: [select children class:children "0" "1" "2" "3"]</p>
<script type="text/javascript">
   	jQuery( 'select.adults').on( 'change',  wpbc_set_visitors_number );
   	jQuery( 'select.children').on( 'change',  wpbc_set_visitors_number );
	function wpbc_set_visitors_number() {
		var s_adults   = jQuery('select.adults option:selected').val();
		var s_children = jQuery('select.children option:selected').val();
		var s_visitors = parseInt(s_adults) + parseInt(s_children);
console.log( s_visitors );
                jQuery('select.visitors option[value=' + s_visitors + ']').prop({selected: true});
		var bk_type = jQuery( "input[name^='bk_type']" ).val();
		if (typeof(showCostHintInsideBkForm) == 'function') {
		      showCostHintInsideBkForm( bk_type );
		}
	}
</script>