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.
- 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.
- You need to activate "Single day" selection mode at the General Booking Settings page in "Calendar" section
- Your theme or some other plugin require do not use any type of Bootstrap library. Otherwise its can be overwriting, and possible issues.
- If you are using Booking Calendar version update 5.4.3 or older, please make this small customization:
Please open this file ../{Booking Calendar Folder}/js/client.js
then find this code:

if(typeof( selectDayPro ) == 'function') {selectDayPro( date, bk_type);}

and replace it to this code:

if(typeof( selectDayPro ) == 'function') {selectDayPro( date, bk_type);}
jQuery( ".booking_form_div" ).trigger( "date_selected" , [ bk_type, date ] );

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

<div class="modal bookingFormModal"    
     style="display:none;width: 600px !important;height: 950px !important;">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">& #10006;</a>
			<h3 style="margin-top:-27px;">Booking Form</h3>
	    <div class="modal-body">
			<!-- 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/>
			<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"] Children: [select children class:span1 "0" "1" "2" "3"]</p> 
			<p>Details:<br /> [textarea details] </p> 
			<p>[checkbox* term_and_condition use_label_element "I Accept term and conditions"] </p> 
				[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>
			<!-- End Content of booking form -->
<script type="text/javascript"> 
     jQuery( ".booking_form_div" ).on('date_selected', function(event, bk_type, date) {

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.

P.S. One additional little fix. Please remove empty space (second symbol) after & in this code "& #10006;" at the booking form. Its will show correctly "x" symbol in the top of modal form.