Booking Form in Gutenberg

How to add Booking Calendar in Gutenberg editor in Classic (old) way?

  1. Click on "+" Plus button to add new block.
  2. Select Formatting section and click on "Classic" block, or simply enter "Classic" in Search field. New "Classic" block will be added to the page.
  3. Click on "Booking Calendar" icon in "Classic" toolbar.
  4. Configure Booking Calendar parameters in popup dialog and click Insert button. Publish / Save the page.

Add Booking Calendar in Gutenberg editor in Classic (old) way

Add Booking Calendar Blocks in Gutenberg editor in "native" mode.
(available since update 8.4 of Booking Calendar)

Shortcode – Showing booking resource details

Note! Please be careful in configuration of Booking Calendar shortcode with quote symbols. Do not use non standard opening or closing quot symbols. Only standard like: ' The best way to type them from keyboard, and not copy/paste.

Showing booking resource details

Showing details about specific booking resource, like Title, Cost, Capacity or ID of booking resource.

Available in paid versions

[bookingresource type=1 show='title']

Parameters
type
ID of the booking resource. You can check the ID of the each booking resources at the Booking > Resources page. If this parameter is skipped, default value = 1. Available in Paid versions
show
define showing details type. If this parameter is skipped, default value is 'title'.
Possible values:
title - show title of booking resources
cost - show default cost of booking resource (from Booking > Resources page . Its can be cost per day, per night, per hour or fixed cost depend from your settings at Booking > Settings > Payment page. Available only in Business Small/Medium/Large, MultiUser versions

capacity - show capacity of booking resource - number of "child" resources. Available only in Business Large, MultiUser versions.

Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Search Results

Search Results

Showing search results at separate page, different from page with search availability form (more info about search availability form shortcode [bookingsearch], check at this page ).
You can search availability for selected check in and check out dates (using date-picker fields), among several booking resources (properties or services). Possible to search only for full dates. Check more about this feature here. Watch it in this video guide. You can check example of using this shortcode at this page.

[bookingsearchresults]

Available in Business Large / MultiUser versions

Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Search Availability form

Note! Please be careful in configuration of Booking Calendar shortcode with quote symbols. Do not use non standard opening or closing quot symbols. Only standard like: ' The best way to type them from keyboard, and not copy/paste.

Search Availability Form

Search availability form - search availability for selected check in and check out dates (using date-picker fields), among several booking resources (properties or services). Possible to search only for full dates. Check more about this feature here. Watch it in this video guide. You can check example of using this shortcode at this page.

Available in Business Large / MultiUser versions

[bookingsearch searchresults='https://mysite.com/search-results/'
noresultstitle='Nothing Found' searchresultstitle='Search results:']

Parameters
searchresults
URL of the page, where search results are showing. You must insert into the content of that page this shortcode: [bookingsearchresults]. If this parameter is skipped, the search results is showing at the same page, just below the search form
searchresultstitle
header of the search results. If this parameter is skipped, then no header.
noresultstitle
showing text, if nothing found.
users
limit the search results based on the availability per user. Showing availability in search results only for the specific users.
Available in MultiUser versions
For example:
[bookingsearch users="1,2"]
where 1,2 – its a ID list of users.
Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Booking Form (without calendar)

Note! Please be careful in configuration of Booking Calendar shortcode with quote symbols. Do not use non standard opening or closing quot symbols. Only standard like: ' The best way to type them from keyboard, and not copy/paste.

Booking Form (without calendar)

This shortcode is useful, if you need to receive several (specific number of bookings) for specific date. It's can be event, where exist restricted number of bookings for this date. You can use this shortcode for booking resource (with specific capacity). Check more about this feature here. Watch it in this video guide.

[bookingform type=1 form_type='standard' selected_dates='24.12.2020']

Available in Business Large / MultiUser versions

Parameters
selected_dates
date of booking. Format for parameter: DD.MM.YYYY. This is obligatory parameter.
type
ID of the booking resource. You can check the ID of the each booking resources at the Booking > Resources page. If this parameter is skipped, default value = 1. Available in Paid versions
form_type
name of the custom booking form. You can create the custom booking forms at the Booking > Settings > Form page. If this parameter is skipped, default value is 'standard'.
Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Booking Edit

Edit Booking

System shortcode for ability to edit or cancel exist booking by visitor, who made this booking. Or show payment form, after sending payment request.

[bookingedit]

Available in Paid versions

Important! Please note, if you open this page directly, you will see this warning "You do not set any parameters for booking editing". It's because system allow to open this page only from link(s) in email templates, which your website visitor had to received, after he/she made the booking (inside of that link will be specific parameter (secret HASH) for the identification of the booking).
Note! Please read more about configuration such functionality here.
Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Timeline

Note! Please be careful in configuration of Booking Calendar shortcode with quote symbols. Do not use non standard opening or closing quot symbols. Only standard like: ' The best way to type them from keyboard, and not copy/paste.

Timeline

Single (booking resource) view

Month View mode (30):

[bookingtimeline type='1' header_title='All Bookings' scroll_day=4 scroll_start_date='2016-11-17']

3 Months View mode (90):

[bookingtimeline type='1' view_days_num=90 header_title='All Bookings' scroll_day=5 scroll_start_date='2016-11-17']

Year View mode (365):

[bookingtimeline type='1' view_days_num=365 header_title='All Bookings' scroll_month=3 scroll_start_date='2016-11-17']


Matrix view (several booking resources)

Available in Paid versions

Day View mode (1):

[bookingtimeline type='1,5,6,7' view_days_num=1 header_title='All Bookings' scroll_day=4 scroll_start_date='2016-11-17']

Week View mode (7):

[bookingtimeline type='1,5,6,7' view_days_num=7 header_title='All Bookings' scroll_day=4 scroll_start_date='2016-11-17']

Month View mode (30):

[bookingtimeline type='1,5,6,7' header_title='All Bookings' scroll_month=2 scroll_start_date='2016-11-17']

2 Months View mode (60):

[bookingtimeline type='1,5,6,7' view_days_num=60 header_title='Bookings' scroll_month=2 scroll_start_date='2016-11-17']


Optional parameters
scroll_day
number of days to scroll
scroll_month
number of months to scroll
scroll_start_date
specific date, where to start show timeline
header_title
header text in timeline
options
Ability to define links for booking resource titles in Matrix timeline. Usage:
[bookingtimeline type='3,4' options='{resource_link 3="/resource-apartment3-id3/"},{resource_link 4="/resource-3-id4/"}' header_title='All Bookings']
Available since update 7.0.1
limit_hours
Ability to limit times for showing cells in TimeLine for 1 day view mode. Usage: limit_hours='9,22' where 9 - its 09:00, start hour and 22 - its 22:00, end hour.
Example 1:
[bookingtimeline type='1' limit_hours='9,22']
Example 2:
[bookingtimeline type='1,5' view_days_num=1 limit_hours='10,21']
Available since update 7.0.1
Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Booking Resources Selection

Note! Please be careful in configuration of Booking Calendar shortcode with quote symbols. Do not use non standard opening or closing quot symbols. Only standard like: ' The best way to type them from keyboard, and not copy/paste.

Selection of booking resource

Available in paid versions. You can check example of using this shortcode at this page.

[bookingselect label='Please select the resource:' form_type='standard' nummonths=1 type='17,16,15']

Parameters
type
ID of the booking resources, separated by comma. You can check the ID of the each booking resources at the Booking > Resources page. For example:
[bookingselect type='17,16,15' selected_type='15' first_option_title='' label='']
selected_type
ID of booking resource, which selected by default in this selectbox.This is obligatory parameter.
nummonths
number of the visible months in the calendar. If "nummonths" is skipped the calendar is show 1 visible month.
startmonth
start month in the calendar after loading of the calendar with booking form. Format of value for this parameter is 'YYYY-MM'. If "startmonth" is skipped the calendar is start showing months from current month.
form_type
name of the custom booking form. You can create the custom booking forms at the Booking > Settings > Form page. If this parameter is skipped then default custom booking form for specific booking resources is loaded (you can define default custom booking forms for specific booking resources at the Booking > Resources page ). Available in Business Medium / Large versions
label
text of label for the select box. If this parameter is skipped, default value empty string.
first_option_title
first option in dropdown list. If you want to skip this option, then leave it empty like this: first_option_title=''
possibility to set calendar additional parameters: full calendar width (percentage or pixels), date cell height, number of months in one row and in Business Medium and higher versions the minimum or fixed number of days selection for the specific day of week or specific season.
Options parameter usage

Specify the full calendar width (one or several months in a row), the height of date cell (so its possible to configure the height of entire calendar by that (just divide the entire calendar width to 7 and you will get approximate date cell height), the number of months in one row (its useful, if you want to show several months in several rows, for example 4 months in 2 rows or 6 months in 2 rows etc).

Configuration rules
Example 1:

options='{calendar months_num_in_row=2 width=568px cell_height=30px}'

Example 2:

options='{calendar months_num_in_row=3 width=100% cell_height=40px}'

The general structure of the configuration calendar parameter is following:

{calendar months_num_in_row="{NUMBER OF MONTHs IN ONE ROW}"
width="{ENTIRE WIDTH OF CALENDAR IN px or %}"
cell_height="HEIGHT of CALENDAR DATE CELL, only in px"}

Parameters:
calendar - name of the parameter. Its always the same (Its required for the future extend functionality).
months_num_in_row - number of months on one row. Its can be any number.
width - the entire height of the calendar. This width can be in "px" (example: "400px") or in percentage (example "100%).
cell_height - height of calendar date cell. The height can be only in "px" (example "30px").

Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Availability Calendar

Note! Please be careful in configuration of Booking Calendar shortcode with quote symbols. Do not use non standard opening or closing quot symbols. Only standard like: ' The best way to type them from keyboard, and not copy/paste.

Availability calendar (without booking form)

[bookingcalendar type=1 nummonths=1 startmonth='2020-01']

Parameters
Note! Because in this calendar showing availability and no booking form, that's why with this shortcode does not possible to select day(s) in calendar. Instead of this shortcode please use booking form shortcode.
nummonths
number of the visible months in the calendar. If "nummonths" is skipped the calendar is show 1 visible month.
startmonth
start month in the calendar after loading of the calendar with booking form. Format of value for this parameter is 'YYYY-MM'. If "startmonth" is skipped the calendar is start showing months from current month.
type
ID of the booking resource. You can check the ID of the each booking resources at the Booking > Resources page. If this parameter is skipped, default value = 1. Available in Paid versions
aggregate
possibility to show reserved days in one calendar from several booking resource. So its mean that one calendar can aggregate dates from several booking resource. Usage: aggregate='2;4;5', where 2;4;5 – ID of booking resources. The ID of booking resources you can check at the Booking > Resources page. Available in Paid versions
possibility to set calendar additional parameters: full calendar width (percentage or pixels), date cell height, number of months in one row and in Business Medium and higher versions the minimum or fixed number of days selection for the specific day of week or specific season.
Options parameter usage

Specify the full calendar width (one or several months in a row), the height of date cell (so its possible to configure the height of entire calendar by that (just divide the entire calendar width to 7 and you will get approximate date cell height), the number of months in one row (its useful, if you want to show several months in several rows, for example 4 months in 2 rows or 6 months in 2 rows etc).

Configuration rules
Example 1:

options='{calendar months_num_in_row=2 width=568px cell_height=30px}'

Example 2:

options='{calendar months_num_in_row=3 width=100% cell_height=40px}'

The general structure of the configuration calendar parameter is following:

{calendar months_num_in_row="{NUMBER OF MONTHs IN ONE ROW}"
width="{ENTIRE WIDTH OF CALENDAR IN px or %}"
cell_height="HEIGHT of CALENDAR DATE CELL, only in px"}

Parameters:
calendar - name of the parameter. Its always the same (Its required for the future extend functionality).
months_num_in_row - number of months on one row. Its can be any number.
width - the entire height of the calendar. This width can be in "px" (example: "400px") or in percentage (example "100%).
cell_height - height of calendar date cell. The height can be only in "px" (example "30px").

Adding booking form into page with new Gutenberg editor
(Available since update 8.4)

Shortcode – Booking Form with calendar

Note! Please be careful in configuration of Booking Calendar shortcode with quote symbols. Do not use non standard opening or closing quot symbols. Only standard like: ' The best way to type them from keyboard, and not copy/paste.

Booking Form

[booking type=1 nummonths=2 form_type='standard']

Parameters
nummonths
number of the visible months in the calendar. If "nummonths" is skipped the calendar is show 1 visible month.
startmonth
start month in the calendar after loading of the calendar with booking form. Format of value for this parameter is 'YYYY-MM'. If "startmonth" is skipped the calendar is start showing months from current month.
type
ID of the booking resource. You can check the ID of the each booking resources at the Booking > Resources page. If this parameter is skipped, default value = 1. Available in Paid versions
form_type
name of the custom booking form. You can create the custom booking forms at the Booking > Settings > Form page. If this parameter is skipped, default value is 'standard'. Available in Business Medium / Large versions
aggregate
possibility to show reserved days in one calendar from several booking resource. So its mean that one calendar can aggregate dates from several booking resource. Usage: aggregate='2;4;5', where 2;4;5 – ID of booking resources. The ID of booking resources you can check at the Booking > Resources page. Available in Paid versions
possibility to set calendar additional parameters: full calendar width (percentage or pixels), date cell height, number of months in one row and in Business Medium and higher versions the minimum or fixed number of days selection for the specific day of week or specific season.
Options parameter usage

Specify the full calendar width (one or several months in a row), the height of date cell (so its possible to configure the height of entire calendar by that (just divide the entire calendar width to 7 and you will get approximate date cell height), the number of months in one row (its useful, if you want to show several months in several rows, for example 4 months in 2 rows or 6 months in 2 rows etc).

Configuration rules
Example 1:

options='{calendar months_num_in_row=2 width=568px cell_height=30px}'

Example 2:

options='{calendar months_num_in_row=3 width=100% cell_height=40px}'

The general structure of the configuration calendar parameter is following:

{calendar months_num_in_row="{NUMBER OF MONTHs IN ONE ROW}"
width="{ENTIRE WIDTH OF CALENDAR IN px or %}"
cell_height="HEIGHT of CALENDAR DATE CELL, only in px"}

Parameters:
calendar - name of the parameter. Its always the same (Its required for the future extend functionality).
months_num_in_row - number of months on one row. Its can be any number.
width - the entire height of the calendar. This width can be in "px" (example: "400px") or in percentage (example "100%).
cell_height - height of calendar date cell. The height can be only in "px" (example "30px").


Specify that during certain seasons (or days of week), the specific minimum number of days must be booked, for example: visitor can select only 3 days starting at Friday and Saturday, 4 days - Friday, 5 days - Monday, 7 days - Saturday, etc...
Important! Please note, this feature is working only, if you activated the "Range days" selection at the General Booking Settings page.

Available in Business Medium / Large, MultiUser versions

Configuration rules
Example 1:

options='{select-day condition="season" for="High season" value="7-14,20"},
{select-day condition="season" for="Low season" value="2-5"}'

Example 2:

options='{select-day condition="weekday" for="1" value="4"},
{select-day condition="weekday" for="5" value="3"},
{select-day condition="weekday" for="6" value="2,7"}'

The general structure of the configuration one condition rule are following:

{select-day condition="{season|weekday}"
for="{Name of season filter|Number of week day}"
value="Number of days selection"}, ...

Parameters:
select-day - name of the rule. Its always the same (Its required for the future extend functionality).
condition - type of the condition. There are 2 types of the condition: "weekday" and "season". "weekday" - is mean that condition rule is based on the selected day of week value, like Monday, Tuesday, etc... . "season" - is mean that condition rule is based on the "season filter" name of selected date. In other words the condition is TRUE if the selected day is belong to some season filter in the Booking > Resources > Filters page.
for - value of the specific conditions. If the condition is true, so then the number of specific days selection will possible in the calendar. If the condition is set as "weekday" so then "for" can have the following numbers: 0 - Sunday, 1 - Monday, 2 - Tuesday, 3 - Wednesday, 4 - Thursday, 5 - Friday, 6 - Saturday.
value - number of specific days selection in the calendar, which can be selected by visitors. It can be simple number or several days separated by comma (example: "7,14,21,28") or by dash (example:"3-5", its the same like this: "3,4,5") or combination (example:"3-5,7,14", its the same like this: "3,4,5,7,14")


Examples:
Week days conditions.

[booking type=1 form_type='standard' nummonths=2
options='{select-day condition="weekday" for="1" value="4"},
{select-day condition="weekday" for="5" value="3"},
{select-day condition="weekday" for="6" value="2,7"}']

where values of the "for" parameter are mean following:
0 - Sunday,
1 - Monday,
2 - Tuesday,
3 - Wednesday,
4 - Thursday,
5 - Friday,
6 - Saturday
You can use only one number of the specific week day.

Its mean that on Monday is possible to select only 4 days,
on Friday is possible to select only 3 days,
on Saturday is possible to select only 2 or 7 days.

Season filters conditions.

[booking type=1 form_type='standard' nummonths=2
options='{select-day condition="season" for="High season" value="7-14,20"},
{select-day condition="season" for="Low season" value="2-5"}']

where values of the "for" parameter are mean following:
High season - its a name of the some Season filter on the Booking > Resources > Filters page,
Low season - its a name of the some Season filter on the Booking > Resources > Filters page
You can use only single season filter name in the one value.

Its mean that during High season is possible to select only 7, 8, 9, 10, 11, 12, 13, 14 or 20 days
and during the Low season is possible to select only 2, 3, 4 or 5 days

Description.
This configuration will allow to set the specific start day(s) selection (day(s) of week) for the specific Season Filters.

Note. All these conditions are based on the "first" day of range days selection in the calendar.

For example, in high season, you can allow start day selection only at Friday in the Low season (or any other days) to start day selection from any weekday.
1) I can suggest that you are activated the range days selection using 2 mouse clicks for the specific day(s) of week. For example for Friday.
2) So then inside of the page, where you are inserted the booking shortcode, you are need to have something like this, to allow any start day selection for the "Low season" days:

Available in Business Medium / Large, MultiUser versions

[booking type=1 form_type='standard' nummonths=6
options='{start-day condition="season" for="Low season" value="0,1,2,3,4,5,6"}']

Configuration of the Options parameter:
start-day – name of the rule. Its always the same.
condition – type of the condition. For this rule is available only 1 type of the condition: “season”.
season – is mean that condition rule is based on the EXACT “season filter” name of selected date. In other words the condition is TRUE if the selected day is belong to some season filter in the Booking > Resources > Filters page.
for – value of the specific condition – EXACT Name of Season Filter.
value – day(s) of week, where we can start selection for the specific season.
It can be simple number or several days separated by comma.
0 – Sunday,
1 – Monday,
2 – Tuesday,
3 – Wednesday,
4 – Thursday,
5 – Friday,
6 – Saturday

In update 6.1 or newer you can use new condition variable: options='{parameter name="my_param" value="value"}'
This option parameter can transfer custom value from this booking form shortcode into the content of booking form.

Available in Business Medium / Large, MultiUser versions

Example of shortcode usage:

[booking type=1 form_type='standard' nummonths=3
options='{parameter name="my_param" value="value"},{parameter name="other_param" value="other value"}']

Example of booking form customization:

[text some_field_name "my_param"]
and
[text other_field_name "other_param"]

Important. Parameter name must be unique and exist only once in booking form.

Adding booking form into page with new Gutenberg editor
(Available since update 8.4)