Availability Calendar Plugin Technical Details

Modified on Wed, 30 Jul at 10:29 AM

Availability Calendar Plugin

A responsive, interactive calendar widget that displays property availability and allows guests to select date ranges for booking. Integrates with property management systems via API.

Features

Interactive date range selection
Visual indicators for available/unavailable/partially booked dates
Responsive design for all devices
Customizable colors and styling

Installation

1. Include the Script

<script src="./dist/0.0.1/availability-calendar.iife.js" 
        data-container-id="calendar-container"
        data-tenant-config='{
          "tenant": "demo", 
          "apiUrl": "https://azores-dev5.iprostage.com/", 
          "brand": {
            "primary": "#f7007c", 
            "secondary": "#0066cc"
          },
          "months": 3
        }'>
</script>

2. Add the Container

<div id="calendar-container" data-property-id="12047"></div>

Configuration

Container Attributes

Attribute	Type	Description	Default
data-container-id	String	ID of the property	Required

Script Attributes

Attribute	Type	Description	Default
data-container-id	String	ID of the target container div	Required
data-tenant-config	JSON String	API endpoint and brand colors	Required

Tenant Config Options

{
  "tenant": "demo",
  "apiUrl": "https://azores-dev5.iprostage.com/",
  "brand": {
    "primary": "#f7007c",
    "secondary": "#0066cc"
  },
  "months": 3
}

Example

<!-- Example: Script to Embed Booking Calendar with JSON config -->
<script src="./dist/0.0.1/availability-calendar.iife.js" 
        data-container-id="calendar-container"
        data-tenant-config='{
          "tenant": "demo", 
          "apiUrl": "https://azores-dev5.iprostage.com/", 
          "brand": {
            "primary": "#f7007c", 
            "secondary": "#0066cc"
          },
          "months": 3
        }'>
</script>

<!-- The container where the booking calendar will render -->
<div id="calendar-container" data-property-id="12047"></div>