Follow this detailed guide to customize day selection for different calendars using JavaScript integration.
Insert Booking Shortcode:
You can use this JavaScript AFTER the booking shortcode, like this: [booking resource_id=1] in the WordPress post or page editor. While the examples provided here use this shortcode, keep in mind that in your own examples, you'll likely have different parameters for the booking shortcode, such as ID of booking resource. To learn more about how to insert and configure the booking shortcode into your posts or pages, please read our guide here.
JavaScript Insertion:
Please note: You can insert JavaScript only if you are logged in as an admin user. Subscriber users do not have the permission to insert JavaScript into posts or pages. Follow these steps to add custom JavaScript:
- Classic Editor: Switch from "Visual" mode to "Text" mode by clicking the "Text" tab at the top right of the post content form.
- Block Editor: Add a "Custom HTML" block, where you can configure the custom JavaScript code. Or switch from Visual Editor to Code Editor by pressing "Ctrl + Shift + Alt + M" or by using the options toolbar at the top right of the page.
-
Elementor: Add an HTML Widget and follow these steps:
- Edit Page: Navigate to the page you want to edit in Elementor and click on "Edit with Elementor."
- Add HTML Widget: Drag and drop the HTML widget from the Elementor widget panel onto the desired section of the page.
- Edit HTML Widget: Click on the "Edit" button of the HTML widget.
- Insert JavaScript: Insert your custom JavaScript script in the HTML code editor.
- Wrap Script: Wrap your JavaScript script inside the <script> tags. For example, <script> your JS code here </script>.
- Save and Preview: Save your changes and preview your website to ensure that the custom JavaScript script is executed properly.
Customization for Booking Calendar Version 9.8.9 or Newer Updates
Single Day Selection
Activate the Single Day Selection mode with the following code. This code is used to enable single-day selection in the current booking form if you have a different type of day selection set as the default at the General Booking Settings page.
[booking resource_id=1]
<script type="text/javascript">
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__single( wpbc_resource_id );
</script>
Please note that in this code, the line var wpbc_resource_id = 1; defines the ID of the booking resource (calendar). You can find the IDs of your booking resources on the Booking > Resources page. Be sure to use the same resource ID in the shortcode with the wpbc_resource_id parameter.
Multiple Days Selection
Enable Multiple Days Selection mode with the following code:
[booking resource_id=1]
<script type="text/javascript">
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__multiple( wpbc_resource_id );
</script>
Please note that in this code, the line var wpbc_resource_id = 1; defines the ID of the booking resource (calendar). You can find the IDs of your booking resources on the Booking > Resources page. Be sure to use the same resource ID in the shortcode with the resource_id parameter.
Range Days Selection with a Fixed Number of Days with 1 Mouse Click.
Activate the Range Days Selection with a fixed number of days using a single mouse click with the following code:
[booking resource_id=1]
<script type="text/javascript">
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__fixed( wpbc_resource_id, 7, [-1] );
</script>
In this code, we are using 3 parameters:
Parameter #1 - Resource ID:
The line var wpbc_resource_id = 1; define the ID of the booking resource (calendar). Locate the IDs of your booking resources on the Booking > Resources page, and ensure you use the same resource ID in the shortcode with the wpbc_resource_id parameter in JavaScript code.
Parameter #2 - Number of Dates to Select:
The second parameter, in our case, sets the number of dates for selection to 7 days.
Parameter #3 - Start Week Day(s) Selection:
The third parameter, represented as an array, allows you to specify the starting day(s) of the week. Assign values according to the following:
0: Sunday
1: Monday
2: Tuesday
3: Wednesday
4: Thursday
5: Friday
6: Saturday
[-1] - defines the selection of any weekdays.
For example, if you want the start day of the range selection to be Saturday and you want to select 2 days, use this code:
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__fixed( wpbc_resource_id, 2, [6] );
If you want to set the start day of range selections as Monday and Friday and make a selection of 4 days, use this code:
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__fixed( wpbc_resource_id, 4, [1,5] );
The following codes are equivalent:
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__fixed( wpbc_resource_id, 7, [-1] );
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__fixed( wpbc_resource_id, 7, [0,1,2,3,4,5,6] );
Range Days Selection as a Dynamic Range of Days with 2 Mouse Clicks.
This code enables this type of day selection for the current booking form if you have a different type of day selection set as the default at the General Booking Settings page.
Activate the Range Days Selection with a dynamic range of days using 2 mouse clicks with the following code:
[booking resource_id=1]
<script type="text/javascript">
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__range( wpbc_resource_id, 7, 14, [], [-1] );
</script>
In this code, we are using 5 parameters:
Parameter #1 - Resource ID:
The line var wpbc_resource_id = 1; define the ID of the booking resource (calendar). Locate the IDs of your booking resources on the Booking > Resources page, and ensure you use the same resource ID in the shortcode with the wpbc_resource_id parameter in JavaScript code.
Parameter #2 - Minimum Number of Days to Select:
The second parameter defines the minimum number of days to select. In our example, it's 7 days.
Parameter #3 - Maximum Number of Days to Select:
The third parameter represents the maximum number of days to be selected with 2 mouse clicks. In our example, it's 14 days.
Parameter #4 - Specific Number of Days to Select:
The fourth parameter is an array that specifies the specific number of days that can be selected.
- To allow any number of days, use this parameter: []
- To allow only week-based selections, such as 7 days, 14 days, 21 days, and so on, use this parameter: [7,14,21].
Parameter #5 - Start Week Day(s) Selection:
The fifth parameter is an array where you can specify the start day of the range days selection.
Specify a specific day of the week or multiple days as the start day for the range selections, use the following values:
0: Sunday
1: Monday
2: Tuesday
3: Wednesday
4: Thursday
5: Friday
6: Saturday
[-1] - defines the selection of any weekdays.
For example, to start the range selection on Saturday and make a selection from 3 to 10 days, use this code:
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__range( wpbc_resource_id, 3, 10, [], [6] );
To start the range selection on Monday and Friday and make a selection of only weeks, use this code:
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__range( wpbc_resource_id, 7, 28, [7,14,21,28], [1,5] );
The following codes are equivalent:
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__range( wpbc_resource_id, 7, 14, [], [-1] );
var wpbc_resource_id = 1;
wpbc_cal_ready_days_select__range( wpbc_resource_id, 7, 14, [], [0,1,2,3,4,5,6] );
If you're using version 9.7.7 or older, you can refer to the Legacy FAQ for Configuring Different Types of Day Selection at this link.
This resource should provide the guidance you need for configuring different types of day selection in your older version of the plugin.
