Configuring Different Types of Day Selection for Different Calendars

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. For inserting JavaScript code into your page, you need to do this:
- In the Classic Editor, switch from "Visual" mode to "Text" mode by clicking the "Text" tab at the top right of the post content form.
- In the Block Editor, 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.


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


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.