The Availability Calendar widget shows the booked and available dates for a property. It pulls data from the property’s booking calendar

Using the Availability Calendar in Elementor

• Edit a Page or Template with Elementor

• Search for “Availability Calendar”

  • In the Elementor widgets panel, search for “Availability Calendar.”

  • Drag and drop it into your desired section.

• Add the listing ID (property ID) to show the correct Availability Calendar Dates

• Get the Listing ID from Wp-admin – > Listings -> ID column (copy the ID that corresponds to your listing)

• Add the Listing ID in the Widget

Other options in the WpRentals Availability Calendar in Elementor

• Hide Widget Title (YES/NO)

How to Style the Availability Calendar Widget

Container Padding

• The calendar container typically has internal spacing to ensure the calendar does not touch the widget’s edges.

• This padding provides a clean and organized appearance.

Date Box Height

• Each date cell in the calendar is designed to have a consistent height, ensuring a uniform grid layout.

• This consistency enhances readability and user experience.

Box Shadow

• The calendar may include subtle box shadows to give a sense of depth and separation from the background.

• This visual effect helps the calendar stand out on the page.

Colors

• You can control the container background  color

• Colors for the calendar can be customized via Theme Options → Design → Calendar Colors

• Specific settings include:

  • Calendar – Background Color for Day: Sets the background color for each day on the calendar.

  • Calendar – Font Color for Day: Sets the font color for the day numbers.

  • Calendar – Internal Booking Color: Defines the color used for dates that are internally booked.

How to use the widget with the WP Bakery plugin

🔸 Important:
Use WPBakery for pages built with WPBakery Page Builder, and Elementor for pages built with Elementor. Do not mix the two builders on the same page.

How to Use the Categories List in WPBakery

• Edit the Page with WPBakery

  • Go to Pages → Edit the page where you want to add the list.

  • Click “Edit with WPBakery Page Builder.”

• Add the “Categories List” Element

  • Click the “+” Add Element button.

  • In the popup, search for “Availability Calendar for a single property”.

  • Click to insert it into the page.

Once added to the page, the listing Id will need to be added to finish the setup