Integration own payment gateway into Booking Calendar update 7.0 or newer

In new update 7.0 (or newer) exist new solid way of integration of your custom gateways.

This instruction is explain how to start work with integration your payment gateway into Booking Calendar Business Small or higher versions of update 7.0 or newer, based on exist payment gateway.

Let say that your new payment gateway have name: loc_payment.

1) You need to create new folder at like this:

../{Booking Calendar Folder}/inc/gateways/loc_payment/

then create new PHP file with following name:

../{Booking Calendar Folder}/inc/gateways/loc_payment/wpbc-gw-loc_payment.php

2) After this you can copy paste code from file

../{Booking Calendar Folder}/inc/gateways/sage/wpbc-gw-sage.php
(or some other, which you better like)
into your new file, and replace in content terms like "sage" or "SAGE" to "loc_payment" or "LOC_PAYMENT" accordingly.

3) Then check your code relative comments in this new file and configure your payment form and settings, relative to API and help info from website of your new payment gateway.

4) Additionally you need to add one new hook for ability to load the new payment gateway

// General API for Adding new gateways:
function add_my_gateway( $gateway ){ return $gateway . ',gateway_ID'; }
add_filters( 'wpbc_gateways_original_id_list', 'add_my_gateway' );

In your case you need to have something like this:

function add_my_loc_payment( $gateway ){ return $gateway . ',loc_payment'; }
add_filters( 'wpbc_gateways_original_id_list', 'add_my_loc_payment' );

Kind Regards.

How to open booking form in popup (modal window) ?

You can use the code like this for opening your booking form in poup (modal window):

<a href="javascript:void(0)" onclick="javascript:jQuery('.bookingFormModal').modal('show');" class="btn button">Booking form in popup window</a></p>
<div class="wpdevbk">
<div class="modal bookingFormModal" style="display:none;width: 700px !important;height: 1000px !important;">
<div class="modal-header"><a class="close" data-dismiss="modal">& #10006;</a></p>
<h3 style="margin-top:-27px;">Booking Form</h3>
</div>
<div class="modal-body"> [booking type=4 nummonths=2] </div>
</div>
</div>
<p>

where [booking type=4 nummonths=2] - shortcode for your booking form.
Probably additionally you will be need to customize some CSS classes and CSS styles relative to your actual theme.

How to edit file from WordPress menu

1) Open the WordPress Plugins menu page.

2) Click on "Edit" link under the "Booking Calendar" plugin.

3) On the right side of that page, please find specific file, like this:

booking/css/client.css

Or some other that you require. Click on that link.

4) Make edit of this file.

5) Then click on "Update file" button to save changes.

6) Clear browser cache and test it.

How to scroll months in several calendars at the same page ?

Its possible to make a trick for scrolling months in several calendars at the same page by clicking on "external links".
Its means that you will have 2 external links (do not inside of calendars for scrolling months forward or backward).
Example:

<a class="button" onclick="jQuery('div.hasDatepick').each(function( index ) { jQuery.datepick._adjustDate(this, -1, 'M'); });" href="javascript:void(0)">Previous Month in all calendars</a> - <a class="button" onclick="jQuery('div.hasDatepick').each(function( index ) { jQuery.datepick._adjustDate(this, +1, 'M'); });" href="javascript:void(0)">Next Month in all calendars</a></p>
<div class="clear"></div>
<div style="float:left;width:45%;margin-right:5%;">[booking type=3 form_type='standard' nummonths=1]</div>
<div style="float:left;width:45%;margin-right:5%;">[booking type=4 form_type='standard' nummonths=1]</div>
<div class="clear"></div>
<p>
P.S. Please read how manually to configure Booking Calendar shortcodes here.

Showing or hiding additional form fields, depend from selected option in selectbox.

If you need to show or hide some form fields in the booking form, depend from the selected option in some selectbox, you can make it with JavaScript customization.

For example, if you need to show additional fields for entering "First and Last Names" of the each visitor, depend from the selected number of this visitors, then you can have this customization in your booking form at the Booking > Settings > Fields page:

<p>Adults:  [select visitors class:visitors_selection "1" "2" "3" "4"] </p>
<p>First Name (required):<br />[text* name] </p>
<p>Last Name (required):<br />[text* secondname] </p>
<p>Email (required):<br />[email* email] </p>
<div class="visitors_selection_div v_num2 v_num3 v_num4" style="display:none;">
   <p>First Name of 2nd visitor:<br />[text* name_2nd] </p>
   <p>Last Name of 2nd visitor:<br />[text* secondname_2nd] </p>
</div>
<div class="visitors_selection_div v_num3 v_num4" style="display:none;">
   <p>First Name of 3rd visitor:<br />[text* name_3rd] </p>
   <p>Last Name of 3rd visitor:<br />[text* secondname_3rd] </p>
</div>
<div class="visitors_selection_div v_num4" style="display:none;">
   <p>First Name of 4th visitor:<br />[text* name_4th] </p>
   <p>Last Name of 4th visitor:<br />[text* secondname_4th]</p>
</div>
<script type="text/javascript">
   jQuery('.visitors_selection').on('change', function() {
       var visitors_num = jQuery(this).find(":selected").val();
       jQuery('.visitors_selection_div').hide();
       jQuery('.visitors_selection_div.v_num' + visitors_num ).show();
   });
</script>

Description of this code:
We are having 3 additional DIV elemtns, where exist fields shortcodes for entering First and Last names of visitors. All these DIV elements does not visible for the visitors

style="display:none;"
.

We attach JavaScript function for selection of the visitors number:

jQuery('.visitors_selection').on('change', function() {

Then we get the number of selected visitors:
var visitors_num = jQuery(this).find(":selected").val();

Hide by default all our additional DIV elements:
jQuery('.visitors_selection_div').hide();

And show DIV elements, that fit to our number of selected visitors:
jQuery('.visitors_selection_div.v_num' + visitors_num ).show();

The trick here in how we apply CSS CLASSes to the DIV elements structure.

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.
- 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 ] );

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

[calendar]
<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>
	    <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/>
			</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"] 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>
			<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 -->
	    </div>
</div>
<script type="text/javascript">
     jQuery( ".booking_form_div" ).on('date_selected', function(event, bk_type, date) {
           jQuery('.bookingFormModal').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.

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.

Advanced JavaScript for the booking shortcodes

This JavaScript is possible to use before the booking shortcode, like this:

[booking type=1 form_type='standard' nummonths=1]
in the edit post or edit page WordPress menu pages. In all examples below we will use that shortcode, but in your examples the parameters of the booking shortcode will be other, of course. Please read more how to insert and configure the booking shortcode into the post or page here.

Important! Please note, you be able to insert the JavaScript if you are logged in as admin user (the subscriber users have not rights to insert the JavaScript into the posts or pages) and turn the edit post content form into the "Text" mode instead of the "Visual" (you can activate this "Text tab" at the top right side of the edit post content form).

This customization is possible for the Business Small or higher versions of update 4.2 or newer.

Please note, for do not have any conflicts, please use this customizations, when you are insert into the post or page only single booking form. Its mean you are not insert the other booking shortcode into this page and do not have any booking widgets at this page.


Activating Single day selection mode.
Please use this code, for activating that type of days selection for the current booking form, if by default you are using the other type of days selections at the General Booking Settings page:

<script type="text/javascript">
   bk_days_selection_mode = 'single';
</script>
[booking type=1 form_type='standard' nummonths=1]


Activating Multiple days selection mode.
Please use this code, for activating that type of days selection for the current booking form, if by default you are using the other type of days selections at the General Booking Settings page:

<script type="text/javascript">
   bk_days_selection_mode = 'multiple';
</script>
[booking type=1 form_type='standard' nummonths=1]


Activating Range days selection as a FIXED number of days with 1 mouse click.
Please use this code, for activating that type of days selection for the current booking form, if by default you are using the other type of days selections at the General Booking Settings page:

<script type="text/javascript">
   bk_days_selection_mode    = 'fixed';
   bk_1click_mode_days_num   = 7;    // Number of days selection with 1 mouse click
   bk_1click_mode_days_start = [-1]; // { -1 - Any | 0 - Su,  1 - Mo,  2 - Tu, 3 - We, 4 - Th, 5 - Fr, 6 - Sat }
</script>
[booking type=1 form_type='standard' nummonths=1]

In this example we are used 2 new variables: bk_1click_mode_days_num and bk_1click_mode_days_start.

bk_1click_mode_days_num - its number of days selection with 1 mouse click. You can assign number of days selections to this variable. For example for having 5 days selections, please use this code:

bk_1click_mode_days_num   = 5;

bk_1click_mode_days_start - its array, where we can specify the start day of the range days selection.
If we are need to set the start day of range selection as any day of week, please use this code:

bk_1click_mode_days_start   = [-1];

If we are need to set the specific start day of week selections or multiple days of week as start day for the range selections, please assign these values:
0 - Sunday,
1 - Monday,
2 - Tuesday,
3 - Wednesday,
4 - Thursday,
5 - Friday,
6 - Saturday.
So if you are need to set the start day of range selection as Saturday, please use this code:
bk_1click_mode_days_start   = [6];

If you are need to set the start day of range selections as Monday and Friday, please use this code:
bk_1click_mode_days_start   = [1,5];

This code

bk_1click_mode_days_start   = [-1];

and this code:
bk_1click_mode_days_start   = [0,1,2,3,4,5,6];

is equivalent.


Activating Range days selection as a DYNAMIC range of days with 2 mouse clicks.
Please use this code, for activating that type of days selection for the current booking form, if by default you are using the other type of days selections at the General Booking Settings page:

<script type="text/javascript">
   bk_days_selection_mode    = 'dynamic';
   bk_2clicks_mode_days_min       = 1;    // Min. Number of days selection with 2 mouse clicks
   bk_2clicks_mode_days_max       = 10;   // Max. Number of days selection with 2 mouse clicks
   bk_2clicks_mode_days_specific  = [];   // Example [5,7]
   bk_2clicks_mode_days_start     = [-1]; // { -1 - Any | 0 - Su,  1 - Mo,  2 - Tu, 3 - We, 4 - Th, 5 - Fr, 6 - Sat }
</script>
[booking type=1 form_type='standard' nummonths=1]

In this example we are used 4 new variables: bk_2clicks_mode_days_min, bk_2clicks_mode_days_max, bk_2clicks_mode_days_specific and bk_2clicks_mode_days_start.

bk_2clicks_mode_days_min - Minimum number of days selection with 2 mouse clicks. You can assign number of days selections to this variable. For example for having minimum 7 days selections, please use this code:

bk_2clicks_mode_days_min   = 7;

bk_2clicks_mode_days_max - Maximum number of days selection with 2 mouse clicks. You can assign specific number of days selections to this variable. For example for having maximum 14 days selections, please use this code:

bk_2clicks_mode_days_max   = 14;

bk_2clicks_mode_days_specific - its array, where we can specify that is possible to select only specific number of days selection.
For having possibility to select any number of days, please use this code:

bk_2clicks_mode_days_specific   = [];

For having possibility to select only weeks - 7 days, 14 days, 21 days... please use this code:
bk_2clicks_mode_days_specific = [7];

For having possibility to select only - 5, 7, 10, 14, 20, 21 days... please use this code:
bk_2clicks_mode_days_specific = [5,7];

bk_2clicks_mode_days_start - its array, where we can specify the start day of the range days selection.
If we are need to set the start day of range selection as any day of week, please use this code:

bk_2clicks_mode_days_start   = [-1];

If we are need to set the specific start day of week selections or multiple days of week as start day for the range selections, please assign these values:
0 - Sunday,
1 - Monday,
2 - Tuesday,
3 - Wednesday,
4 - Thursday,
5 - Friday,
6 - Saturday.
So if you are need to set the start day of range selection as Saturday, please use this code:
bk_2clicks_mode_days_start   = [6];

If you are need to set the start day of range selections as Monday and Friday, please use this code:
bk_2clicks_mode_days_start   = [1,5];

This code

bk_2clicks_mode_days_start   = [-1];

and this code:
bk_2clicks_mode_days_start   = [0,1,2,3,4,5,6];

is equivalent.

How to add the functionality of various attributes or tags to the search form ?

In the search availability form possible to use additional parameters for searching. For example searching by specific location or some other attributes.

How to configure it?

"Custom fields".
You can use the "custom fields" in the posts or pages, were you inserted shortcode for booking form.

One general rule for the "custom fields" - each custom field must start from "booking_" term.

For example, if you wan to search by City, then you need to make this configuration:

1) In the search form (at the Booking > Settings > Search page), you can use this selectbox configuration:

<label>City:</label>
<select id="booking_city" name="booking_city">
   <option value="">Any</option>
   <option value="Salernes">Salernes</option>
   <option value="Barjols">Barjols</option>
   <option value="Lorgues">Lorgues</option>
</select>

2) Then at the post or page, where you inserted booking form, you need to add new "custom field" with name "booking_city" and value (for example): "Lorgues".

In the same way you can add new additional parameter(s).
For example:

<label>Pool:</label>
<select id="booking_pool" name="booking_pool">
 <option value="">Any</option>
 <option value="1">Yes</option>
 <option value="0">No</option>
</select>

And of course in the page or post you need to create custom field: "booking_pool" with value "1" or "0"

General rules.

If you are having additional parameters, like this
- property_ab (this is some parameter)
- property_ac (number of beds)
- property_ad (square meters)
- ... etc...

you need to have parameters in format, where names of the custom fields starts from "booking_" terms:

- booking_property_ab (this is some parameter)
- booking_property_ac (number of beds)
- booking_property_ad (square meters)

Then inside of the search form you can have this selections:

    Number of beds:
    <select id="booking_property_ac" name="booking_property_ac">
    <option value="1">1</option>
    <option value="2">2</option>
    </select>

And for the posts or pages you can use custom fields with names "booking_property_XX", where XX = {ab | ac | ad}.

Tags
You can use "tags" in the posts or pages, where you are inserted the booking form for the specific booking resource.
In the search form you are need to use this keyword:

[search_tag] - search inside of posts/pages, which are have this tag.

Please note, its text field, so your visitors need manually to enter the tag for the searching.

Trick
Its also possible to customize this element as selectbox instead of the text field. You will be need to replace the [search_tag] shortcode to this HTML element:

<select id="booking_search_tag" name="tag">
<option value="">Any</option>
<option value="room">Room</option>
<option value="apartment">Apartment</option>
</select>

where "<option value="room">Room</option>" - list of options to select; "room" its value of the tag, and "Room" - its label, which is showing for the visitors....

Please click at the "Reset cache" button at the bottom of the Booking > Settings > Search page, after you are finish configuration, before making tests at the client side. You can check this troubleshooting instruction, if you do not see search results: http://wpbookingcalendar.com/faq/no-search-results/

How to insert booking shortcode into any other place of site (not inside of post or page) ?

1. Please read what type of shortcodes you are want to insert here
2. Open for edit your theme (PHP) file. For example: single.php.
3. Insert this code for showing booking form

<?php echo do_shortcode("[booking type=1 nummonths=1]"); ?>

where instead of this shortcode: [booking type=1 nummonths=1], can be any other shortcode from the point #1.
4. save the changes in the PHP file.

How to configure selection of booking resources (booking forms) using select box at one page and showing selected booking form then? (Available only at paid versions)

This customizations is available for the versions 4.0.2 or older.
Inside of the versions 4.1 or newer you can use the special shortcode for the insertion of the booking resource selections into the page or post. Please read more how to insert and configure the booking shortcode into the post or page here.

Firstly you need to open file of your actual theme, where you want to show this selection (For example: if you want to show it at pages, so then you need t open page.php file).
Then you need to add to specific place of this file next code:

<?php if ( strpos($_SERVER['REQUEST_URI'],'/bookingpage/') !==false ) { ?>
<label for="calendar_type">Type of booking:</label>
<select name="active_booking_form" onchange="jQuery('.bk_forms').css('display', 'none');
document.getElementById(this.value).style.display='block';" >
    <option selected="selected" value="select">Please Select</option>
    <?php global $wpdb;
    $types_list = $wpdb->get_results( "SELECT booking_type_id as id, title FROM ".$wpdb->prefix ."bookingtypes" );
    foreach ($types_list as $tl) { ?>
        <option value="<?php echo $tl->id; ?>"><?php echo $tl->title; ?></option>
    <?php } ?>
 </select></p>
<p><?php foreach ($types_list as $tl) { ?>
<div class="bk_forms" id="<?php echo $tl->id; ?>" style="display: none;"><?php do_action('wpdev_bk_add_form', $tl->id, 1); ?></div>
<?php } ?>
<?php } ?>

At this example, this line

<?php if ( strpos($_SERVER['REQUEST_URI'],'/bookingpage/') !==false ) { ?>

is condition to showing the selection of form only at the specific page. In this case its page, which have term in URL, like this: 'bookingpage'

You can check this example at this page.