FAQ > Booking Form Setup - Advanced Mode > [calendar] Shortcode

[calendar] Shortcode

This article explains how to use the [calendar] shortcode in Booking Calendar’s Advanced (CF7-style) form mode. It also clarifies an important rule: in the form editor, you typically use [calendar] with no parameters. Calendar behavior parameters belong to the page/post shortcode [booking], not inside the form.

What’s inside

  1. What is the [calendar] shortcode?
  2. Where to place this shortcode
  3. Where parameters actually go ([booking])
  4. Selection modes (single, multiple, range)
  5. Integrating dates with time fields
  6. Live “hint” outputs to show selections & costs
  7. Capacity counters & legend
  8. Showing different content by weekday/season
  9. Examples (form editor vs page/post)
  10. Best practices & common pitfalls
  11. More information

1) What is the [calendar] shortcode?

The [calendar] shortcode inserts the interactive month-view booking calendar directly into your booking form. It lets visitors select available dates and automatically blocks unavailable ones. It’s the core element of any Booking Calendar form.

2) Where to place this shortcode

Add [calendar] inside your form layout at WP Booking Calendar → Settings → Booking Form → Booking Form Fields. Place it within your layout tags so it appears exactly where you want.

<r>
  <c><l>Select Date *</l><br>[calendar]</c>
  <c><l>Notes</l><br>[textarea details]</c>
</r>
Rule: Use [calendar] only once per form. If your setup allows multiple resources on the same page, these are controlled by page/post parameters (see next section).

3) Where parameters actually go ([booking])

When you publish your form on a page/post, use [booking] with parameters. That’s where you control calendar behavior (resource, months to show, etc.). Keep [calendar] in the form editor without parameters.

Example – page/post shortcode:

[booking resource_id=1]

Example – form editor content:

[calendar]
Why: The page/post shortcode decides which resource and how the calendar behaves; the form simply decides where it’s shown in the layout.

For the full list of supported [booking] parameters, see the official guide: Shortcode: Booking Form – Parameters & Usage

4) Selection modes (single, multiple, range)

Depending on your settings in WP Booking Calendar → Settings → Calendar → Calendar Settings, the calendar can allow:

  • Single — pick one date (appointments)
  • Multiple — pick several non-consecutive dates
  • Range — pick a continuous date range (rentals)
Selection behavior is set in plugin settings and/or via JavaScript, as explained in this article.

5) Integrating dates with time fields

Pair the calendar with reserved time field names to capture times:

  • [selectbox starttime "09:00" "09:30" "10:00" ...] — start time list
  • [selectbox endtime "17:00" "17:30" "18:00" ...] — end time list
  • [selectbox rangetime "10:00 AM - 12:00 PM@@10:00 - 12:00" ...] — predefined ranges (value must be 24-hour format)
  • [selectbox durationtime "30 min@@00:30" "1 hour@@01:00" ...] — duration values in HH:MM
Validation: Reserved time names (starttime, endtime, rangetime, durationtime) require strict 24h values.
Note: If you use starttime, you must also use endtime or durationtime. The rangetime field is used by itself.

6) Live “hint” outputs to show selections & costs

Show read-only hints near the calendar to reflect selections and costs in real time:

  • Dates/times: [selected_dates_hint], [start_time_hint], [end_time_hint], [days_number_hint], [nights_number_hint]
  • Costs: [cost_hint], [original_cost_hint], [additional_cost_hint], [deposit_hint], [balance_hint], [coupon_discount_hint]
  • Resource: [resource_title_hint], [capacity_hint]

7) Capacity counters & legend

If your resource has capacity, display remaining slots with [capacity_hint]. Add a legend so users understand calendar colors/status:

[legend_items]
[legend_items items="available,unavailable,pending,approved,partially"]
[legend_items is_vertical="1"]

Or enable the default legend list in WP Booking Calendar → Settings → Calendar → Calendar Settings.

8) Showing different content by weekday/season

Use [condition] blocks to adjust form content by weekday or season. Example switching time ranges by weekday:

[condition name="weekday-condition" type="weekday" value="*"]
  Default: [selectbox rangetime "10:00 - 11:00" "11:00 - 12:00"]
[/condition]
[condition name="weekday-condition" type="weekday" value="1,2"]
  Mon/Tue: [selectbox rangetime "10:00 - 12:00" "12:00 - 14:00"]
[/condition]
Reminder: Enable single-day selection mode when using weekday/season conditions.

9) Examples (form editor vs page/post)

Form editor

<r>
  <c><l>Select Date *</l><br>[calendar]</c>
  <c><l>Select Time *</l><br>[selectbox starttime "09:00" "09:30" "10:00"]</c>
</r>
<r>
  <c>Date: <strong>[selected_dates_hint]</strong></c>
  <c>Total: <strong>[cost_hint]</strong></c>
</r>

Page/Post

[booking resource_id=1]

The form itself still contains only [calendar].

10) Best practices & common pitfalls

  • Include exactly one [calendar] per form.
  • Keep time values in 24h format; use Title@@Value to show friendly labels.
  • Place hints for instant confirmation; use final outputs in emails and booking listings.
  • Add [legend_items] or enable the default legend for clarity.
  • For multilingual forms, wrap blocks with [lang=LOCALE].

11) More information

Full list of page/post [booking] parameters: Shortcode: Booking Form – Parameters & Usage