The calendar

The idea behind the front end booking calendar is that your clients send a booking request with just a few clicks. They can view the availability, select the reservation period, add services, coupons and add their contact details without changing the page.


Calendar description

Availability view

  • Button 1 - Click to add an extra month when you view the availability in the calendar.
  • Button 2 - Click to remove the last month from the booking calendar view.
  • Button 3 - Click to display previous month(s)
  • Button 4 - Click to display next month(s).
  • Item 5A - Selected the start date of your reservation. The reservation period can be selected directly in calendar view or the sidebar.
  • Item 5B - Select the end date of your reservation. The reservation period can be selected from the calendar view or the sidebar.
  • Item 6 - Price or promotional price details, with currency. The currency can be changed and it can be displayed in the front or after the value.
  • Item 7 - Old price info. It is displayed only when a promotional price is created.
  • Item 8 - Information about the number of available items in that day, or day status (available, booked, special, unavailable).
  • Item 9 - Information about the day, which was filled in by the administrator.
  • Item 10 - Day with available status. Color can be changed in template CSS file.
  • Item 11 - Day with booked status. Color can be changed in template CSS file.
  • Item 12 - Day with special status. Color can be changed in template CSS file.
  • Item 13 - Day with unavailable status. Color can be changed in template CSS file.
  • Item 14 - Previous month day(s), or day(s) that have passed. To properly separate this day(s), we reduced the opacity.
  • Item 15 - Next month day(s). To properly separate this day(s), we reduced the opacity.
Calendar description

Calendar sidebar

  • Item 5A & 5B - The selected period for which you want to make a reservation. If you do not want to view availability, directly select the dates and booking system will inform you if the days are available and can be booked, or not.
  • Item 16 - Select the number of items to book.

Extras form

  • Item 17 - Select extras & services you want to add to your reservation.

Coupons form

  • Item 18 - Enter your voucher code, validate it and then apply it, if you want to use it with your reservation.

Reservation details

  • Item 19 - Main reservation details are displayed here, as start date (hour), end date (hour), number of booked items and price.
  • Item 20 - A list of extras & services you want to add to your booking request and how they influence your main reservation price.
  • Item 21 - A list of taxes & fees that are applied to your booking request and how they influence your main reservation price.
  • Item 22 - If a deposit is requested to make a booking, the value of that deposit is displayed here.
  • Item 23 - Total cost for the reservation.

Client form

  • Item 24 - Error message - if the field is mandatory and has not been completed.
  • Item 25 - Form field label.
  • Item 26 - Indicate that the field is mandatory.
  • Item 27 - Text input field.
  • Item 28 - Text input field.
  • Item 29 - Email input field, always mandatory.
  • Item 30 - Phone input field. Accepts only numbers.
  • Item 31 - Textarea input field.

Order form

  • Item 32 - Select the payment option and press the Book now button to finalize the reservation.