Discover the most up-to-date FAQ articles
Deprecated
1) Open the WordPress Plugins menu page at your admin panel of your site. You have to see at the bottom of the Booking Calendar the line about he new version is available.
2) Click on update link and wait until the plugin is downloaded, installed and reactivated.
3) You are need to wait until the message will show that the plugins is reactivated successfully. It's important.
4) If you are by some reason will get the some error messages, please make the reactivation process:
- open firstly the General Booking Settings menu page, and at the right side of the page recheck that this option "Delete booking data during uninstall" is turned Off (unchecked), otherwise all your booking data during deactivation will be deleted;
- open the WordPress Plugins menu page and click on "Deactivate" link of Booking Calendar. Wait for the message "Plugin is deactivated successfully". It's important.
- open the WordPress Plugins menu page and click on "Activate" link of Booking Calendar. Wait for the message "Plugin is Activated successfully". It's important.
Please clear the browser cache, because update can have a new updated CSS or JS files.
Now you can use your updated version.
1) If you are use the paid version of Booking Calendar, do not make update from the WordPress directory, otherwise you will get the free version.
2) You can check if the new version is available and what changes or new features in the new version at this page
3) You can request the free updates, of your purchased version (if the updates are ready) during 6 months, after purchase of your version. After this period, if you want to prolong the getting updates for the next 6 months, it's will cost the 50% from the original cost of your version of Booking Calendar. You can request the new update of Booking Calendar on this page.
4) Update process.
After you have received the archive with updated version of plugin, follow these steps:
Tip We recommend to make backup of your DataBase and Booking Calendar folder, before making backup, in this case, you will be able to rollback to previous versions and data in any time.
Tip Please note, during update process all plugin files are replacing to new. Its means that if you have edited any source files of plugin (in plugin folder), then you will be need to make this customization again after plugin update
- Open General Booking Settings menu page of Booking Calendar admin panel, and at the right side of the page recheck that this option "Delete booking data during uninstall" is turned Off (unchecked), otherwise all your booking data and settings options during deactivation will be deleted;
- Open the WordPress Plugins menu page and click on "Deactivate" link of Booking Calendar. Wait for the message "Plugin is deactivated successfully".
- Click on "Delete" link under Booking calendar and wait until the plugin is deleted.
- Open WordPress Plugins menu page, then select the "Add New" plugin sub menu and then click on "Upload Plugin" button at top of page. Click on browse button in upload form and select the booking zip archive, which you have received. Click on upload button and wait until the plugin is uploaded.
If you will receive message like this: "The uploaded file exceeds the upload_max_filesize directive in php.ini", then please check this troubleshooting instruction.
If you want to upload the booking zip archive via FTP, then you need to extract the archive content. You have to get at result the booking folder with plugins files. Then upload entire this folder to ../wp-content/plugins/ folder at your server. - Open WordPress Plugins menu page and click on "Activate" link under new Booking Calendar plugin version.
Wait for the message "Plugin is activated successfully".
Please clear the browser cache, before using new update.
1) When you made the purchase upgrade of Booking Calendar paid version, you have to receive the link for downloading the paid version of Booking Calendar. Please download this archive.
After you have received the archive with updated version of plugin, follow these steps:
Tip We recommend to make backup of your DataBase and Booking Calendar folder, before making backup, in this case, you will be able to rollback to previous versions and data in any time.
Tip Please note, during update process all plugin files are replacing to new. Its means that if you have edited any source files of plugin (in plugin folder), then you will be need to make this customization again after plugin update
2) Open General Booking Settings menu page of Booking Calendar admin panel, and at the right side of the page, recheck that this option: "Delete booking data during uninstall" is turned Off (unchecked), otherwise all your booking data during deactivation will be deleted.
3) Open the WordPress Plugins menu page and click on "Deactivate" link of Booking Calendar (your previous version). Wait for the message "Plugin is deactivated successfully".
4) Click on "Delete" link of Booking calendar and wait until the plugin is deleted.
5) Open WordPress Plugins menu page, then select the "Add New" plugin sub menu and then click on "Upload Plugin" button at top of page. Click on browse button in upload form and select the booking zip archive, which you have received. Click on upload button and wait until the plugin is uploaded.
If you will receive message like this: "The uploaded file exceeds the upload_max_filesize directive in php.ini", then please check this troubleshooting instruction.
If you want to upload the booking zip archive via FTP, then you need to extract the archive content. You have to get at result the booking folder with plugins files. Then upload entire this folder to ../wp-content/plugins/ folder at your server.
6) Open the WordPress Plugins menu page and click on "Activate" link.
Wait for the message "Plugin is activated successfully".
Please clear the browser cache, before using new update.
1) When you made the purchase of Booking Calendar paid version, you have to receive the link for downloading the paid version of Booking Calendar. Please download this archive.
After you have received the archive with updated version of plugin, follow these steps:
Tip We recommend to make backup of your DataBase and Booking Calendar folder, before making backup, in this case, you will be able to rollback to previous versions and data in any time.
Tip Please note, during update process all plugin files are replacing to new. Its means that if you have edited any source files of plugin (in plugin folder), then you will be need to make this customization again after plugin update
2) Open the General Booking Settings menu page of Booking Calendar admin panel, and at the right side of the page recheck that this option "Delete booking data during uninstall" is turned Off (unchecked), otherwise all your booking data during deactivation will be deleted.
3) Open the WordPress Plugins menu page and click on "Deactivate" link of Booking Calendar (free version). Wait for the message "Plugin is deactivated successfully". It's important.
4) Click on "Delete" link of Booking calendar and wait until the plugin is deleted.
5) Open WordPress Plugins menu page, then select the "Add New" plugin sub menu and then click on "Upload Plugin" button at top of page. Click on browse button in upload form and select the booking zip archive, which you have received. Click on upload button and wait until the plugin is uploaded.
If you will receive message like this: "The uploaded file exceeds the upload_max_filesize directive in php.ini", then please check this troubleshooting instruction.
If you want to upload the booking zip archive via FTP, then you need to extract the archive content. You have to get at result the booking folder with plugins files. Then upload entire this folder to ../wp-content/plugins/ folder at your server.
6) Open the WordPress Plugins menu page and click on "Activate" link.
Wait for the message "Plugin is activated successfully".
Please clear the browser cache, before using new update.
What's Next?
Please read the general instruction about usage of paid versions of Booking Calendar.
You can create the different booking resources, unique calendars - your properties or services at the Booking > Resources page. And then you be able to insert booking shortcode (booking form or availability calendar) for for specific booking resource (your properties or service) into the post or page.
Please read more how easily insert booking form or availability calendar into a pages or how manually configure Booking Calendar shortcodes in content of your pages.
Please add this code int the booking form at the Booking > Settings > Form page, for ability to deselect dates in calendar by clicking on "Deselect" button:
<a href="javascript:void(0)" onclick="javascript:reset_days_selection( this );" class="btn">Unselect Dates</a>
<script type="text/javascript">
function reset_days_selection( el ) {
var br_id = jQuery( el ).closest( 'form' ).find( 'input[name^="bk_type"]' ).val();
wpbc_unselect_all_days( br_id );
if( typeof( showCostHintInsideBkForm ) == 'function' ) { showCostHintInsideBkForm( br_id ); }
}
</script>
The Stripe integration with Strong Customer Authentication (SCA) rules is available in the update 8.5 or newer of Booking Calendar plugin.
You need to update your version of Booking Calendar to the latest update (8.5 or newer) of Booking Calendar. You can request the new update of Booking Calendar on this page.
For activation of Stripe integration with Strong Customer Authentication (SCA) rules its required to open the Booking > Settings > Payment page and activate Stripe v.3.0 integration.
You can test this integration in action at the live demo here.
Deprecated for Update 9.8 or newer
By default option "Allow unlimited bookings per same day(s)" from Advanced section of Booking > Settings General page is working for all booking resources. What's if you need to activate this for specific booking resource(s).
By default its does not possible to configure this via settings in the Booking Calendar You need to make source code customization for having this functionality.
For example, let you having the booking resources with following ID:
- ID = 3 "Resource A" ( after booking having days as unavailable )
- ID = 4 "Resource B" (need to have option " Allow unlimited bookings per same day(s) " - days always available )
- ID = 5 "Resource C" (need to have option " Allow unlimited bookings per same day(s) " - days always available )
Please open this file ../wp-content/plugins/{Booking Calendar Folder}/core/lib/wpdev-booking-class.php
( you can check how to edit files in WordPress menu in this article https://wpbookingcalendar.com/faq/how-edit-file-in-wp-menu/ )
then find this code:
********************************
$booking_is_days_always_available = get_bk_option( 'booking_is_days_always_available' );
// if ( strpos($_SERVER['REQUEST_URI'],'page=wpbc-new') !== false ) { $booking_is_days_always_available = 'On'; }
// if ( in_array( $bk_type, array( '12', '15', '17' ) ) ) $booking_is_days_always_available = 'On'; // Set dates in calendar always available only for specific resources with specific ID
********************************
and replace it to this code:
********************************
$booking_is_days_always_available = get_bk_option( 'booking_is_days_always_available' );
// if ( strpos($_SERVER['REQUEST_URI'],'page=wpbc-new') !== false ) { $booking_is_days_always_available = 'On'; }
if ( in_array( $bk_type, array( '4', '5' ) ) ) $booking_is_days_always_available = 'On'; // Set dates in calendar always available only for specific resources with specific ID
********************************
Of course, if you have the different ID (than 3 and 4) of such booking resources you need to make fixes in the code: array( '4', '5' ) .
Also at the Booking > Settings General page in calendar section, you need to be sure that these options was unchecked:
- "Use pending days as available"
- "Allow unlimited bookings per same day(s)"
Disclaimer. Please note, if you will modify the source code of the Booking Calendar, we will not guaranteed the correct work of plugin and do not support it.
Deprecated for Update 9.8 or newer
To show different background of days, depending from number of available slots per day possible in the Booking Calendar Business Large or higher version for booking resources (calendars) with specific capacity.
1) Firstly please check this instruction how possible to configure your calendar skin by modification CSS file.
2) Then you need to activate this Calendar Skin: "Multidays" at the Booking > Settings General page in Calendar section.
This calendar skin have special CSS classes for ability to define different colors in calendar depend from capacity of booking resource (calendar) and number of bookings per specific date(s) (in other words based on availability on specific date). Probably you will be need to copy this calendar skin to separate folder, as explained in above instruction for future customization.
3) The color for pending days you can configure in calendar skin the same as it's done for approved days, so in this case, days will look the same.
And Calendar legend items for pending days you can deactivate at the Booking > Settings General page in section relative to calendar legend items.
4) Now most interesting.
Each calendar day cells (in this calendar skin) have specific CSS class like:
.reserved_days_count1 .reserved_days_count2 .reserved_days_count3 .reserved_days_count4 .reserved_days_count5 .reserved_days_count6 .reserved_days_count7 .reserved_days_count8 .reserved_days_count9 .reserved_days_count10
The number at the end of these CSS classes explains the availability per specific day.
In this case you can configure in your calendar skin based on these colors the different color for the different availability.
For example:
/* Partially Available 1-5 */
.datepick-inline .reserved_days_count1,
.datepick-inline .reserved_days_count2,
.datepick-inline .reserved_days_count3,
.datepick-inline .reserved_days_count4,
.datepick-inline .reserved_days_count5,
.datepick-inline .reserved_days_count6,
.datepick-inline .reserved_days_count7{
background-color: #eb5;
color: #eeeeee;
text-shadow: 0px -1px 0px #888888;
}
/* Available */
.datepick-inline .reserved_days_count8,
.datepick-inline .reserved_days_count9,
.datepick-inline .reserved_days_count10 {
background-color: #1A5;
color: #eeeeee;
text-shadow: 0px -1px 0px #888888;
}
/* Approved */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved,
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved div.check-out-div {
background-color: #ee5933;
}
/* Pending */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve,
/* P E N D I N G - BACKGROUND for Check In Approved & Check Out Pending || Check Out Approved & Check In Pending Dates // FixIn: 6.0.1.2 */
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div.check-out-div {
background-color: #ee5933;
}
Disclaimer. Disclaimer. Unfortunately we can not start, right now, some personal customization or custom development, because we have almost no free time.
Check more about, what support we are providing here.
Thank you for understanding.
Please note, if you modify the source code of the Booking Calendar, we will not guarantee the correct work of the plugin and do not support it.
Deprecated for Update 9.8 or newer
Description
In the Booking Calendar Business Large or higher version, each calendar, which represents a booking resource, can have its own specific capacity. Here's how this capacity feature works:
Booking Options. When visitors interact with the booking form, they can choose how many items they want to book within a specific calendar. If the total number of bookings for the selected dates or times does not exceed the calendar's capacity, they can proceed with their reservations.
Preventing Overbooking. The capacity feature serves as a safeguard against overbooking. It ensures that the total number of reservations for specific dates within a calendar does not surpass the specified capacity. Once the capacity is reached, no more bookings are accepted for those dates or times until existing reservations are canceled or modified.
Versatile Usage. This functionality is versatile and can be applied to various scenarios where you need to manage and limit bookings for specific resources. Whether it's hotel room reservations, restaurant table bookings, event space rentals, or parking slot allocations, the capacity feature ensures a smooth and controlled booking process.
By allowing you to set and manage capacity for each calendar (booking resource), the Booking Calendar plugin ensures efficient booking operations while preventing overbooking, providing a user-friendly experience for both administrators and visitors. The main or master booking resource in each group of related resources helps coordinate this capacity management.
Configuration
If you are need to configure the booking resource(s) with some capacity, so you are need to add the "child" resources to your "parent" resource at the top form of Booking > Resources admin page.
Just create one resource, and then create several child resources (set parent resource for them as a first resource), so the capacity of the first resource will increase.
Capacity it's number of times, which is possible to reserve the same date in calendar, based on number of selected visitors in the booking form. Resource its more like room, where is possible to be several seats for the visitors.
Here is examples of different configuration of capacity settings.
The availability (number of seats/maximum amount of people ) can be calculated only based on the "visitors" shortcode (shortcode
[select visitors "1" "2" "3" "4" "5"]in the Booking > Settings > Fields page at top form ). Its can not calculate availability based on the adults or children shortcodes.
You need to activate "Set capacity based on number of visitors" option at the general booking settings page at advanced section. After that you will see the maximum number of visitors at the Resources page.
Also you can read more here: https://wpbookingcalendar.com/help/booking-resource/
Let say you are having booking resources like this:
test (parent resource, capacity = 3) Max. visitors = 2 - test 1 - test 2
A) If you are do not activate the "Set capacity based on number of visitors" so then, during reservation process you will book only ONE available booking resource, do not depend from the any number of visitors selections in the "visitors" select box. So it's mean if you are select 1 or 2 or 5 visitors in the select box at the booking form, you will reserve only one booking resource (firstly its will be parent resource "test", during the next new (second) reservation it's will be child resource "test 1" and during third reservation you will reserve "test 2" booking resource.
If the "Set capacity based on number of visitors" is not checked, the availability for the specific date will be 3 (based on capacity only) and during reservation process the selection number of visitors will not impact to the Availability and just will be saved as a any other field.
B) If you will set checked the "Set capacity based on number of visitors" option and activate first radio button in sub settings:
Note: Be sure to match the maximum number of visitors for the one booking resource with the number of visitors specified on the booking form.
Then the Availability in the mouse over tool-tip will be based on the capacity of the booking resource. So it's mean that for the free dates the availability will be show as 3, as in our previous example.
But during reservation process, you can not select more than 2 visitors in the select box. Because each booking resource, is support only 2 visitors per resource.
In other words, during reservation process you can reserve only 1 booking resource during one reservation, but the system is also check that the number of visitors, which you are selected in the booking form have to be not more then maximum number of visitors, which you are set at the Booking > Resource page. The availability in mouse over tooltip will be based on the capacity and in out example will be show as 3
C) And now last variant, if you had selected the bottom radios button option:
Note: Be sure to match the maximum number of visitors for all booking resources with the number of visitors specified on the booking form.
So it's mean that availability over the specific date will be based on the capacity and number of maximum visitors per resource. In our example it's will be show as 6 ( 3 * 2 = 6 ).
During reservation process the system can book several booking resources, it's will calculate the visitors, which you are select in the booking form for the each booking resource (parent or child) and number of visitors per this resource.
So for example if you are select 3 visitors in the booking form. It's will reserve 2 booking resources. Because first resource is support 2 visitors and second is support also 2 but we are have only 1 ( 3 - 2 = 1 ), in other words one bed will be free in the second resource.
How all this capacity concept is working for search availability in search form at front-end side ?
You can test search form in action at the live demo of Booking Calendar Business Large version.
During searching availability in search form, number of selected visitors (shortcode [search_visitors] in the search form at Booking > Settings > Search page), can work in several ways. It's depend from selected or do not selected option: "Set capacity based on number of visitors" at the General Booking Settings page in advanced section and selected additional parameters.
A) If "Set capacity based on number of visitors" option UNCHECKED (not selected), then search availability form will search for available booking resources only based on the Check In/Out dates and possible some other parameters, but its will not depend from the selected number of visitors.
You can select any number of visitors and its will show items in search results, if other parameters (check in/out dates and possible some other parameters fit to selected options in search form).
B) If "Set capacity based on number of visitors" option CHECKED and you activated this sub option:
Note: Be sure to match the maximum number of visitors for the one booking resource with the number of visitors specified on the booking form.
Then during search process, the number of visitors (selected in the search form) must be equal or less then maximum number of visitors per booking resources (that you set at the Booking > Resources page). Its does not depend from the number of available "child booking resources", if the booking resource was configured with specific capacity (have child booking resources) and this booking resources (or at least one child booking resource) have available dates that you are searching.
C) If "Set capacity based on number of visitors" option CHECKED and you activated this sub option:
Note: Be sure to match the maximum number of visitors for all booking resources with the number of visitors specified on the booking form.
Then during search process, the number of visitors (selected in the search form) must match the maximum number of visitors for all booking resource. Its means that availability per booking resource calculated as number of maximum visitors per resource multiply on capacity of booking resources (number of child booking resources). If we are having booking resource with capacity 3 (2 child booking resources), and maximum number of visitors as 2. Then maximum availability = 2 * 3 = 6 And its means that, if we selected 6 visitors in the search form we fit to get this booking resource in search results. If we select more than 6 visitors, then we do not match this criteria and this booking resource will not show in the search results.
Deprecated. Legacy Customization for versions 4.2 to 9.7.7.
Please note, for do not have any conflicts, please use this customization, 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.
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>
This FAQ guide deprecated. In latest update of Booking Calendar 10.1 or newer, please check guides here.
If you need to show the description and the images in the search results like in this search availability demo.
Then the text in search results is getting from "Excerpt” section of post, where you have inserted the booking form
and the image - its "Favorite image" of this post.
In search result form at the Booking > Settings > Search page you will be need to use these shortcodes:
[booking_featured_image] - featured image, taken from the featured image associated with the post, [booking_info] - booking info, taken from the excerpt associated with the post
In case if you are using pages with booking forms and not the posts.
You need to install some other plugins, like "page-excerpt" plugin, which will add the excerpt section to the pages, as well.
The "Featured Image" by default is supporting in Pages, as well. But this functionality must support by your theme.
So please contact support of your theme, about adding ability to use "Featured Images" in your pages.
The update 4.0 of Booking Calendar have a new names of the versions.
The Booking Calendar Standard become Booking Calendar Free,
Booking Calendar Professional -> Booking Calendar Personal,
Booking Calendar Premium -> Booking Calendar Business Small,
Booking Calendar Premium Plus -> Booking Calendar Business Medium,
Booking Calendar Hotel Edition -> Booking Calendar Business Large,
Booking Calendar MultiUser -> Booking Calendar MultiUser.
This FAQ guide deprecated. In latest update of Booking Calendar 10.1 or newer, please check guides here.
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}.
In case if you do not see the custom fields in your page, please follow this instruction for enabling custom fields in WordPress Gutenberg editor.
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: https://wpbookingcalendar.com/faq/no-search-results/
This FAQ guide deprecated. In latest update of Booking Calendar 10.1 or newer, please check guides here.
If you want to display the search form and its results on the same page, even before users start searching, follow these easy steps:
1) If your page URL looks like this: https://your-server.com/search/availability/, just copy and paste the following codes into your page:
[bookingsearch searchresults='/search/availability/' searchresultstitle='{searchresults} Result(s) Found' noresultstitle='Nothing Found']
[bookingsearchresults]
Make sure to replace searchresults='/search/availability/' with the relative path to your page.
2) Also, go to Booking > Settings > Search page in the Advanced section and turn on the "Disable days selection" option. This prevents date selection if a user clicks on a search result right after the page loads without searching. This ensures no dates are pre-selected when a user hasn't started a search.
Following these steps will help you display default search results and the form before users even start searching.
This FAQ guide deprecated. In latest update of Booking Calendar 10.1 or newer, please check guides here.
-
Check Cache Plugins: Start by examining your cache plugins, such as "WP Super Cache" or "W3 Total Cache."
If you're using any of these plugins, consider turning them off or ensuring they don't cache pages with booking forms.
You can achieve this by adding an exception to the pages with booking forms, search forms, or search results.
This step helps prevent caching-related problems. -
Review Shortcode Placement:
Double-check where you've placed booking forms using the shortcode for booking form: [booking ...].
Ensure that you've inserted these shortcodes into the content of posts or pages rather than in sidebars or widgets.
Make sure you're using the correct shortcodes for either the (main) parent resource (the one with capacity) or single booking resources (where capacity = 1).
If you've mistakenly used shortcodes for child resources, the associated bookings won't appear in search results.
For detailed instructions on setting up booking resources, refer to this guide
and explore the concept of capacity here. -
Clear Cache (Mandatory): Navigate to "Booking > Settings > Search" and click "Clear cache".
This step is crucial. You should see the number of pages with booking forms.
If you don't find any discovered pages with booking forms, it signals a configuration issue in the previous steps. -
Check Search Availability: Reassess how the search availability feature functions,
taking into account different parameter settings.
Learn more about this process here.
After completing these steps, proceed to test the search form on your website's front end.
You may also find it helpful to explore adding additional parameters to your search form.
Discover more about this feature here.
Open the edit post or edit page menu page or add new page or post and inside of the edit content toolbar click on Booking Calendar button (button with calendar icon). Inside of the configuration popup dialog select your booking resource (in the paid versions only) and configure other options, like number of visible month of calendar, inserting the booking form with calendar or just availability calendar and insert the booking shortcode into the content of post or page. Publish or update the post or page, open it at client side of site and you will be able to see and make bookings in the booking form.
Booking Calendar Personal and higher versions.
In the paid versions of Booking Calendar (Personal, Business Small/Medium/Large, Multiuser), you will be able to select, in the popup configuration dialog additional parameter(s), like booking resource (your different properties, like rooms or services). It's mean that each booking calendar in the booking form, will have identification for the the specific booking resource. And you can make the different bookings for the same dates but in these
Booking Calendar Business Medium/Large versions
In additional at the Business Medium/Large versions of the Booking calendar, you can select the different booking forms (you can customize the different booking forms at these versions at the Booking > Settings > Fields page).
Terms: Personal, Business Small, Business Medium, Business Large, MultiUser, insert booking shortcode, insert booking form into post or page.
How to add Booking Calendar in Gutenberg editor in Classic (old) way?
- Click on "+" Plus button to add new block.
- Select Formatting section and click on "Classic" block, or simply enter "Classic" in Search field. New "Classic" block will be added to the page.
- Click on "Booking Calendar" icon in "Classic" toolbar.
- Configure Booking Calendar parameters in popup dialog and click Insert button. Publish / Save the page.
Inserting the booking form/calendar in sidebar widgets.
Please open the WordPress admin menu page: Appearance > Widgets configuration. Add the Booking Calendar widget to the one of your sidebars and configure the parameters, like a booking resource (in the paid versions only), number of visible month of calendar, inserting the booking form with calendar or just availability calendar etc...
Terms: Personal, Business Small, Business Medium, Business Large, MultiUser, widget, booking calendar widget.
Inserting the booking form/calendar into any other place of your site
You can insert the booking form or calendar into the any other place of your site by editing the PHP code of your theme files and insting the special code for that. Please read more detail about how to do this in the FAQ.
Terms: Personal, Business Small, Business Medium, Business Large, MultiUser, inserting booking calendar in any pace of your site.
Deprecated for Update 9.8 or newer
First of all, Booking Calendar can not show past months, because it’s does not possible to create bookings in past.
You can show past bookings in Timeline view, like in this demo.
But if by some reason, you need to show bookings in usual inline month view calendar, so then you will be need to make this fix.
Please make backup of your Booking Calendar folder at the ../wp-content/plugins/ for ability to restore it, if you will make some mistake, or just need original Booking Calendar version.
Important! Please note, its hack/trick customization. Its will not be supported in future updates. So you will need to make this customization each time after upfdate of plugin. If something is not work, please recheck this instruction once again. Its was test in Booking Calendar update 8.3.2 and working well.
Disclaimer. Unfortunately we can not start, right now, some personal customization or custom development, because almost have no free time.
Check more about new features here https://wpbookingcalendar.com/faq/need-new-feature/
Thank you for understanding.
Please note, if you will modify the source code of the Booking Calendar, we will not guaranteed the correct work of plugin and do not support it.
So let start.
1) Please open this file ../wp-content/plugins/{Booking Calendar Folder}/core/lib/wpdev-booking-class.php
( you can check how to edit files in WordPress menu in this article https://wpbookingcalendar.com/faq/how-edit-file-in-wp-menu/ )
then find this code:
if ($approved == 'admin_blank') {</p>
<p> $sql_req = "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE dt.booking_date >= CURDATE() {$trash_bookings} AND bk.booking_type IN ($bk_type_additional) AND bk.form like '%admin@blank.com%'</p>
<p> ORDER BY dt.booking_date" ;
$dates_approve = $wpdb->get_results( $sql_req );</p>
<p> } else {</p>
<p> if ($approved == 'all')
$sql_req = apply_bk_filter('get_bk_dates_sql', "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE dt.booking_date >= CURDATE() {$trash_bookings} AND bk.booking_type IN ($bk_type_additional)</p>
<p> ". (($skip_booking_id != '') ? " AND dt.booking_id NOT IN ( ".$skip_booking_id." ) ":"") ."</p>
<p> ORDER BY dt.booking_date", $bk_type_additional, 'all' , $skip_booking_id);</p>
<p> else
$sql_req = apply_bk_filter('get_bk_dates_sql', "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE dt.approved = $approved AND dt.booking_date >= CURDATE() {$trash_bookings} AND bk.booking_type IN ($bk_type_additional)</p>
<p> ". (($skip_booking_id != '') ? " AND dt.booking_id NOT IN ( ".$skip_booking_id." ) ":"") ."</p>
<p> ORDER BY dt.booking_date", $bk_type_additional, $approved, $skip_booking_id );
//$sql_req = str_replace( 'dt.booking_date >= CURDATE() AND', '' , $sql_req); //Show past bookings, as well
$dates_approve = apply_bk_filter('get_bk_dates', $wpdb->get_results( $sql_req ), $approved, 0,$bk_type );
}
and replace it to this code:
if ($approved == 'admin_blank') {</p>
<p> $sql_req = "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE 1=1 {$trash_bookings} AND bk.booking_type IN ($bk_type_additional) AND bk.form like '%admin@blank.com%'</p>
<p> ORDER BY dt.booking_date" ;
$dates_approve = $wpdb->get_results( $sql_req );</p>
<p> } else {</p>
<p> if ($approved == 'all')
$sql_req = apply_bk_filter('get_bk_dates_sql', "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE 1=1 {$trash_bookings} AND bk.booking_type IN ($bk_type_additional)</p>
<p> ". (($skip_booking_id != '') ? " AND dt.booking_id NOT IN ( ".$skip_booking_id." ) ":"") ."</p>
<p> ORDER BY dt.booking_date", $bk_type_additional, 'all' , $skip_booking_id);</p>
<p> else
$sql_req = apply_bk_filter('get_bk_dates_sql', "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE dt.approved = $approved AND 1=1 {$trash_bookings} AND bk.booking_type IN ($bk_type_additional)</p>
<p> ". (($skip_booking_id != '') ? " AND dt.booking_id NOT IN ( ".$skip_booking_id." ) ":"") ."</p>
<p> ORDER BY dt.booking_date", $bk_type_additional, $approved, $skip_booking_id );
//$sql_req = str_replace( 'dt.booking_date >= CURDATE() AND', '' , $sql_req); //Show past bookings, as well
$dates_approve = apply_bk_filter('get_bk_dates', $wpdb->get_results( $sql_req ), $approved, 0,$bk_type );
}
2) Please open this file ../wp-content/plugins/{Booking Calendar Folder}/js/client.js
( you can check how to edit files in WordPress menu in this article https://wpbookingcalendar.com/faq/how-edit-file-in-wp-menu/ )
then find this code:
var bkMinDate = 0;
and replace it to this code:
var bkMinDate = null;
3)
then find this code:
if (is_this_admin == false) {
and replace it to this code:
if ( (false) && (is_this_admin == false) ) {
4) Please open this file ../wp-content/plugins/{Booking Calendar Folder}/js/wpbc_times.js
( you can check how to edit files in WordPress menu in this article https://wpbookingcalendar.com/faq/how-edit-file-in-wp-menu/ )
then find this code:
function isTimeTodayGone( myTime, sort_date_array ){
and replace it to this code:
function isTimeTodayGone( myTime, sort_date_array ){
return false;
5) If you are using paid version of Booking Calendar, then
Please open this file ../wp-content/plugins/{Booking Calendar Folder}/inc/_ps/personal.php
( you can check how to edit files in WordPress menu in this article https://wpbookingcalendar.com/faq/how-edit-file-in-wp-menu/ )
then find this code:
if ($approved == 'all')
$sql_req = "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE dt.booking_date >= CURDATE() {$trash_bookings} AND bk.booking_type IN ($bk_type) ".$skip_bookings."</p>
<p> ORDER BY dt.booking_date";</p>
<p> else
$sql_req = "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE dt.approved = $approved AND dt.booking_date >= CURDATE() {$trash_bookings} AND bk.booking_type IN ($bk_type) ".$skip_bookings."</p>
<p> ORDER BY dt.booking_date" ;
and replace it to this code:
if ($approved == 'all')
$sql_req = "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE 1=1 {$trash_bookings} AND bk.booking_type IN ($bk_type) ".$skip_bookings."</p>
<p> ORDER BY dt.booking_date";</p>
<p> else
$sql_req = "SELECT DISTINCT dt.booking_date</p>
<p> FROM {$wpdb->prefix}bookingdates as dt</p>
<p> INNER JOIN {$wpdb->prefix}booking as bk</p>
<p> ON bk.booking_id = dt.booking_id</p>
<p> WHERE dt.approved = $approved AND 1=1 {$trash_bookings} AND bk.booking_type IN ($bk_type) ".$skip_bookings."</p>
<p> ORDER BY dt.booking_date" ;
6) If you are using Booking Calendar Business Large or higher version then, Please open this file ../wp-content/plugins/{Booking Calendar Folder}/inc/_bl/biz_l.php
( you can check how to edit files in WordPress menu in this article https://wpbookingcalendar.com/faq/how-edit-file-in-wp-menu/ )
then find this code:
WHERE ".$my_approve_rule." dt.booking_date >= CURDATE() {$trash_bookings} AND
and replace it to this code:
WHERE ".$my_approve_rule." 1=1 {$trash_bookings} AND
Test it.
Please do not forget to clear browser cache before testing these changes.
Deprecated for Update 9.8 or newer
1) Simple way of tracking after redirection to the "Thank you" page.
In case, if you do not have showing "Payment form(s)" after submission of the bookings (in paid versions of Booking Calendar), and you have defined the "Redirection to the "Thank you" page (instead o showing "Thank you" message) at the Booking > Settings General page in Form section, so then simplest way to add your "tracking code" (like Google Adwords code) inside of your "Thank you" page. Please open your "thank you" page for editing, switch to the "Text view mode" of your content editor (html view mode) and insert your Tracking code, which was provided by Google Adwords or some other tracking service.
2) Other more flexible way of tracking booking form submission is adding code in your functions.php file of your theme.
Firs of all please update your version of Booking Calendar to the update 8.6 or newer. You can request the new update of paid versions of Booking Calendar on this page.
After this add inside of the functions.php file of your theme code similar to this,
(you can check how to edit files in WordPress menu in this article):
function my_booking_tracking( $params ){
?><!-- Google Code for Booking Conversion Page -->
<script type="text/javascript">
/* Insert bellow your Google Tracking Code */
</script><?php
}
add_action( 'wpbc_track_new_booking', 'my_booking_tracking' );
Kind Regards.
Deprecated for Update 9.8 or newer
If you want to make several steps for reservation process, so then you need to customize your booking form at Booking > Settings > Fields page.
Exmaple #1
Your customization have to look like this (Please take your attention to the bold code, which is make all this trick)
<div class="bk_calendar_step">
[calendar]
<a href="javascript:bk_calendar_step_click();">Continue to step 2</a>
</div>
<div class="bk_form_step" style="display:none;">
<div style="text-align:left">
<a href="javascript:bk_form_step_click();">Back to step 1</a>
<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>Details:<br /> [textarea details] </p>
<p>[submit "Send"]</p>
</div>
</div>
<script type="text/javascript">
function bk_calendar_step_click(){
jQuery('.bk_calendar_step' ).css({'display':'none'});
jQuery('.bk_form_step' ).css({'display':'block'});
}
function bk_form_step_click(){
jQuery('.bk_calendar_step' ).css({'display':'block'});
jQuery('.bk_form_step' ).css({'display':'none'});
}
</script>
Exmaple #2
This example of the booking form customization show the form fields and calendar in the "1st step" and at the second step show "confirmation" info about entering data by visitor. Please note, using this form template, you need to insert the booking shortcode into the separate pages only, if you insert the several booking forms into one page, then its possible some issues. Also in this customization possible issues of not showing "1st step", if visitor enter some wrong data (for example into email), or skip some required fields and press the "Send" button, but the warnings about this fields are showing in the first step. And its means that visitor need to click on "Back to 1st step" button.
<div class="bk_calendar_step">
[calendar]
<p class="wpbc_first_name">First Name (required):<br />[text* name]<span class="wpbc_label" style="display:none;">First Name</span></p>
<p class="wpbc_last_name">Last Name (required):<br />[text* secondname]<span class="wpbc_label" style="display:none;">Last Name</span></p>
<p class="wpbc_email">Email (required):<br />[email* email]<span class="wpbc_label" style="display:none;">Email</span></p>
<p class="wpbc_phone">Phone:<br />[text phone]<span class="wpbc_label" style="display:none;">Phone</span></p>
<p><span class="wpbc_adults">Adults: [select visitors class:span1 "1" "2" "3" "4"]<span class="wpbc_label" style="display:none;">Adults</span></span> <span class="wpbc_children">Children: [select children class:span1 "0" "1" "2" "3"]<span class="wpbc_label" style="display:none;">Children</span></span></p>
<p class="wpbc_details">Details:<br /> [textarea details]<span class="wpbc_label" style="display:none;">Details</span></p>
<hr />
<a href="javascript:void(0)" onclick="javascript:bk_calendar_step_click();" class="btn">Continue to step 2</a>
</div>
<div class="bk_form_step" style="display:none;clear:both;">
<p>[captcha]</p>
<p><strong>Booking data:</strong></p>
<p><strong>[cost_hint]</strong> - cost of the booking </p>
<p><strong>[selected_timedates_hint]</strong> - dates for booking</p>
<div class="wpbc_booking_data_container"></div>
<hr/>
<p>[checkbox* term_and_condition use_label_element "I Accept term and conditions"] </p>
<div style="text-align:right;"><a href="javascript:void(0)" onclick="javascript:bk_form_step_click();" class="btn" style="margin:2px 15px 0;float:left;">Back to step 1</a> [submit class:btn "Send"]</div>
</div>
<script type="text/javascript">
function bk_calendar_step_click(){
var booking_data = '';
booking_data += jQuery(".wpbc_first_name .wpbc_label").html() +': <span class="fieldvalue"><strong>' + jQuery(".wpbc_first_name input").val() + '</strong></span><br/> ';
booking_data += jQuery(".wpbc_last_name .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_last_name input").val() + '</strong></span><br/> ';
booking_data += jQuery(".wpbc_email .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_email input").val() + '</strong></span><br/> ';
booking_data += jQuery(".wpbc_phone .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_phone input").val() + '</strong></span><br/> ';
booking_data += jQuery(".wpbc_adults .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_adults select option:selected").text() + '</strong></span><br/> ';
booking_data += jQuery(".wpbc_children .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_children select option:selected").text() + '</strong></span><br/> ';
booking_data += jQuery(".wpbc_details .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_details textarea").val() + '</strong></span><br/> ';
jQuery(".wpbc_booking_data_container" ).html( booking_data );
jQuery(".bk_calendar_step" ).css({"display":"none"});
jQuery(".bk_form_step" ).css({"display":"block"});
makeScroll('.bk_form_step');
}
function bk_form_step_click(){
jQuery(".bk_calendar_step" ).css({"display":"block"});
jQuery(".bk_form_step" ).css({"display":"none"});
}
</script>
Exmaple #3
This example of booking form have 5 steps procedure with showing summary info about entering booking form fields and selected date(s) at final step. Also this configuration check about any errors, and show step with specific error, before submitting the booking.
<div class="wpbc_steps wpbc_step_1">
<h2>Step 1/5</h2>
[calendar]
<hr/>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(2);" class="btn">Continue to step 2</a>
</div>
<div class="wpbc_steps wpbc_step_2" style="display:none;clear:both;">
<h2>Step 2/5</h2>
<p>First Name (required):<br />[text* name] </p>
<p>Last Name (required):<br />[text* secondname] </p>
<hr/>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(1);" class="btn">Back to step 1</a>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(3);" class="btn">Continue to step 3</a>
</div>
<div class="wpbc_steps wpbc_step_3" style="display:none;clear:both;">
<h2>Step 3/5</h2>
<p>Email (required):<br />[email* email] </p>
<p>Phone:<br />[text phone] </p>
<hr/>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(2);" class="btn">Back to step 2</a>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(4);" class="btn">Continue to step 4</a>
</div>
<div class="wpbc_steps wpbc_step_4" style="display:none;clear:both;">
<h2>Step 4/5</h2>
<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>
<hr/>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(3);" class="btn">Back to step 3</a>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(5);" class="btn">Continue to step 5</a>
</div>
<div class="wpbc_steps wpbc_step_5" style="display:none;clear:both;">
<h2>Step 5/5</h2>
<h3>Summary</h3>
<div class="wpbc_summary">
<strong>Dates</strong>:<span class="fieldvalue dates"></span><br/>
<strong>First Name</strong>:<span class="fieldvalue name"></span><br/>
<strong>Last Name</strong>:<span class="fieldvalue secondname"></span><br/>
<strong>Email</strong>:<span class="fieldvalue email"></span><br/>
<strong>Phone</strong>:<span class="fieldvalue phone"></span><br/>
<strong>Adults</strong>:<span class="fieldvalue visitors"></span><br/>
<strong>Children</strong>:<span class="fieldvalue children"></span><br/>
<strong>Details</strong>:<br /><span class="fieldvalue details"></span>
</div>
<hr/>
<p>[checkbox* term_and_condition use_label_element "I Accept term and conditions"] </p>
<p>[captcha]</p>
<hr/>
<a href="javascript:void(0)" onclick="javascript:wpbc_to_step(4);" class="btn">Back to step 4</a>
[submit class:btn "Send"]
</div>
<script type="text/javascript">
// Show next/prior steps
function wpbc_to_step( step_num ){
jQuery(".wpbc_steps" ).hide();
jQuery(".wpbc_step_" + step_num ).show();
wpbc_show_summary( step_num );
}
// Show Summary
function wpbc_show_summary( step_num ){
if ( step_num == 5 ) {
var bk_type = jQuery( "input[name^='bk_type']" ).val();
jQuery('.fieldvalue.dates').html( wpbc_get_selected_dates() );
jQuery('.fieldvalue.name').html( jQuery( "input[name='name"+bk_type+"']" ).val() );
jQuery('.fieldvalue.secondname').html( jQuery( "input[name='secondname"+bk_type+"']" ).val() );
jQuery('.fieldvalue.email').html( jQuery( "input[name='email"+bk_type+"']" ).val() );
jQuery('.fieldvalue.phone').html( jQuery( "input[name='phone"+bk_type+"']" ).val() );
jQuery('.fieldvalue.visitors').html( jQuery( "select[name='visitors"+bk_type+"']" ).val() );
jQuery('.fieldvalue.children').html( jQuery( "select[name='children"+bk_type+"']" ).val() );
jQuery('.fieldvalue.details').html( jQuery( "textarea[name='details"+bk_type+"']" ).val() );
}
}
// Get selected dates
function wpbc_get_selected_dates() {
var bk_type = jQuery( "input[name^='bk_type']" ).val();
var inst = jQuery.datepick._getInst(document.getElementById('calendar_booking'+bk_type));
var d_check_in = inst.dates[0];
var d_check_out = inst.dates[ (inst.dates.length - 1) ];
var show_check_in = jQuery.datepick.formatDate('mm/dd/yy'
, d_check_in
, jQuery.datepick._getFormatConfig(inst)
);
var show_check_out = jQuery.datepick.formatDate('mm/dd/yy'
, d_check_out
, jQuery.datepick._getFormatConfig(inst)
);
if ( show_check_in != show_check_out )
return show_check_in + ' - ' + show_check_out;
else
return show_check_in;
}
jQuery(document).ready(function(){
jQuery(".wpbc_steps" ).hide();
jQuery(".wpbc_step_1" ).show();
});
jQuery( ".booking_form_div input[type='button']" ).on( "click", function() {
//Catch Submit event
jQuery('.wpdev-help-message.alert' ).each(function(){
if ( jQuery(this).css('display') != 'none') {
jQuery('.wpbc_steps').hide();
jQuery(this).parents('.wpbc_steps').show();
}
});
});
</script>
How to add Booking Calendar in Gutenberg editor in Classic (old) way?
- Click on "+" Plus button to add new block.
- Select Formatting section and click on "Classic" block, or simply enter "Classic" in Search field. New "Classic" block will be added to the page.
- Click on "Booking Calendar" icon in "Classic" toolbar.
- Configure Booking Calendar parameters in popup dialog and click Insert button. Publish / Save the 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>
<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>
Please read how manually to configure Booking Calendar shortcodes here.
Description.
The conflict can be, if the theme is using Bootstrap library and version of Bootstrap is different then version in Booking Calendar. Booking Calendar is use bootstrap library 3.3.5
Such conflict can make issue of opening and immediate closing some interface elements (like drop down lists or modal windows), or issue with showing tooltips or popovers, etc...
How to fix?
1) You can open the Booking > Settings General page and in Advanced section click on " Show advanced settings of JavaScript loading " link and then set as checked only this option " Disable Bootstrap loading on Front-End ".
Then Save the changes and test it.
Please note, in this case, possible issues with not showing mouse over tooltips at the front-ens side in Booking Calendar. Its tooltips for showing booking data, times and cost, when mouse over specific day.
2) Other solution can be to load CSS and JavaScript files of Booking Calendar only at the page(s) with booking form or availability calendar and do not load such files at all other pages. If you want to make such fix, then open the Booking > Settings General page and in Advanced section click on “+ Show advanced settings of JavaScript loading” link. Then set as checked this option “Load JS and CSS files only on specific pages” and in textarea specify all relative urls of pages with booking forms. One url per one line, like this:
/booking/app1/ /other/service1/
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">✖</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.
Please open the Booking > Settings General page and in "Advanced section" please click on "Show advanced settings of JavaScript loading" link after this please be sure that this checkbox option: "Disable Bootstrap loading on Front-End" is UNCHECKED.
1) This error can be at some servers of 1&1 hosting, or may be at some other ones.
For fixing this issue, please add this line to their .htaccess file:
AddType x-mapp-php5 .php
2) Also please try to deactivate one by one all your active plugins at the WordPress > Plugins menu. Then retest it again.
If its not help, please deactivate your active theme and active the default WordPress theme. And then retest it again. May be there exist some conflict with some active plugin or actual theme and just need to find the reason of that issue.
3) If the previous solutions will not help, please recheck your error.log file from your server configuration (please contact your server administrator or support of the hosting company, if you will have troubles with searching of this file) to be sure in a reason of that issue.
Reason of issue.
This issue can appear, if you was using the old version of Booking Calendar (older than 4.1 version) and made update to the new WordPress version.
This issue was fixed since the update 4.1 of the Booking Calendar. You can check about that at the change-log here.
Solution.
You are need to update your version of Booking Calendar to the latest version.
If you are using the free version of Booking Calendar you can update your version in the WordPress > Plugins menu page.
If you are using the paid version of Booking Calendar you can request the new update at this page.