How to open booking form in modal window after clicking on date in calendar ?

This customization will open booking form in modal window, after visitor clicked on date in calendar.
Preparation:
- You need to have only one booking form on one specific visible page. This customization does not support several booking forms on the same page, or resource selections.
- You need to activate "Single day" selection mode at the General Booking Settings page in "Calendar" section
- Fix to load modal window JavaScript:
Please open this file ../{Booking Calendar Folder}/core/wpbc-js.php
then find this code:

	if  ( $where_to_load != 'client' )
		wp_enqueue_script( 'wpbc-modal',  wpbc_plugin_url( '/assets/libs/ui/_out/dropdown_modal.js' ),      array( 'jquery' ),              '3.3.5.1' );

and replace it to this code:
		wp_enqueue_script( 'wpbc-modal',  wpbc_plugin_url( '/assets/libs/ui/_out/dropdown_modal.js' ),      array( 'jquery' ),              '3.3.5.1' );

Booking form customization:
Please open the Booking > Settings > Fields page, and make customization of your booking form in a way like this:

[calendar]
<div class="wpdevelop">
    <div class="modal bookingFormModal" tabindex="-1" role="dialog" style="display:none;z-index:9999999;">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&#10006;</span></button><h4 class="modal-title">Booking Form</h4></div>
              <div class="modal-body"> </p>
<p><!-- Content of booking form -->
            <div class="form-hints">
                Selected Date and Times: [check_in_date_hint]   [start_time_hint] - [end_time_hint]<br>
                Total cost: [cost_hint]<br/><br/>
            </div>
            <p>Select Times:<br />[select* rangetime multiple "10:00 AM - 12:00 PM@@10:00 - 12:00" "12:00 PM - 02:00 PM@@12:00 - 14:00" "02:00 PM - 04:00 PM@@14:00 - 16:00" "04:00 PM - 06:00 PM@@16:00 - 18:00" "06:00 PM - 08:00 PM@@18:00 - 20:00"]</p>
            <p>First Name (required):<br />[text* name] </p>
            <p>Last Name (required):<br />[text* secondname] </p>
            <p>Email (required):<br />[email* email] </p>
            <p>Phone:<br />[text phone] </p>
            <p>Adults:  [select visitors class:span1 "1" "2" "3" "4"]</p>
            <p>Details:<br /> [textarea details] </p>
            <p>[checkbox* term_and_condition use_label_element "I Accept term and conditions"] </p>
            <p>[captcha]</p>
            <hr/>
            <div>
                [submit class:btn "Send"]
                <a href="javascript:void(0)" style="float: right;margin: 2px 20px;" onclick="javascript:jQuery('.bookingFormModal').modal('hide');" class="btn">Close</a>
            </div>
<!-- End Content of booking form -->         </p>
<p>              </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css"> .wpdevelop .modal { overflow-y: scroll; } </style>
<script type="text/javascript">
    jQuery( ".booking_form_div" ).on('date_selected', function(event, bk_type, date) {
        jQuery('.bookingFormModal').wpbc_my_modal('show');
    });
</script>

Update the booking form, and test it at the front-end.

Please note, starting from this line:

<!-- Content of booking form -->

to this line
<!-- End Content of booking form -->

is going on your booking form customization. So you can insert or remove your booking form shortcodes.

This customization, was made for the Booking Calendar Business Medium version, so here is using some shortcodes (like [cost_hint], [check_in_date_hint], [start_time_hint], [end_time_hint], [select rangetime ...]), that can be unavailable in lower versions.