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

[legend_items] Shortcode

This article explains how to use the [legend_items] shortcode in Booking Calendar’s Advanced (CF7-style) form mode. It shows how to display the booking calendar legend inside your form and customize it with parameters for specific items, orientation, and styling.

What’s inside

  1. What is the [legend_items] shortcode?
  2. Where to place this shortcode
  3. Available parameters
  4. Usage examples
  5. Styling the legend
  6. Best practices & tips
Please note, you can omit this shortcode entirely and instead enable the calendar legend to display directly under the calendar via WP Booking Calendar → Settings → Calendar → Calendar Settings.

1) What is the [legend_items] shortcode?

The [legend_items] shortcode outputs the legend for your booking calendar — a list of color-coded date statuses (e.g., Available, Pending, Approved, Unavailable). This helps visitors understand what each color in the calendar means.

2) Where to place this shortcode

Place [legend_items] in your form layout at WP Booking Calendar → Settings → Booking Form → Booking Form Fields to show the legend alongside the calendar. You can position it inside layout tags (<r>, <c>) or anywhere else in the form structure.

<r>
  <c style="flex:2">[calendar]</c>
  <c style="flex:1">[legend_items]</c>
</r>
Tip: The default legend shows all configured statuses from your Booking Calendar settings.

3) Available parameters

  • items="list" — Comma-separated list of status keys to display. Valid keys: available, unavailable, pending, approved, partially, in_range. Example: items="available,unavailable,pending"
  • is_vertical="1" — Displays legend items vertically instead of inline.
  • show_title="0" — Hides the default “Legend” title above the list.
  • custom_titles="Title1,Title2,..." — Overrides default item titles (order must match the items list).
Note: If you omit items, all statuses from your calendar settings will be shown in their default order.

4) Usage examples

Default legend with all statuses

[legend_items]

Show only Available and Unavailable, vertically

[legend_items items="available,unavailable" is_vertical="1"]

Custom titles for statuses

[legend_items items="available,pending" custom_titles="Open for Booking,Awaiting Confirmation"]

5) Styling the legend

The legend inherits your theme’s list and text styles, but you can customize it using CSS. Each status gets a specific class for targeting:

  • .wpbc-legend-item-available
  • .wpbc-legend-item-unavailable
  • .wpbc-legend-item-pending
  • .wpbc-legend-item-approved
  • .wpbc-legend-item-partially
/* Example: Make legend boxes bigger */
.wpbc-legend-item-available .wpbc-legend-color {
  width: 20px;
  height: 20px;
}
Tip: Use flexbox or grid in your CSS to align legend items with the calendar for a clean layout.

6) Best practices & tips

  • Place the legend close to the calendar so users can easily match colors to meaning.
  • Hide unnecessary statuses with items= to avoid clutter.
  • Use is_vertical="1" in narrow side columns for better mobile readability.
  • Translate or rename statuses with custom_titles= to match your site’s language and tone.
  • Test on both desktop and mobile to ensure colors and text remain readable.