Availability Calendar for Beds24

A lightweight WordPress plugin that displays a Beds24 room or property availability calendar via the [avail_calendar] shortcode.

No jQuery. No build step. No external dependencies beyond the Beds24 availability API.

Features

• Colour-coded tiles — green (available), red (unavailable), diagonal split for arrival/departure transition days
• Locale-aware — month names, weekday labels, and first day of week adapt automatically to any BCP-47 language tag via the browser's built-in Intl API
• Click-to-book — available dates link directly to beds24.com/booking.php with the correct date, room, and language
• SessionStorage cache — 5-minute TTL per room/property, avoids repeated API calls during navigation
• Dark mode — respects prefers-color-scheme
• Multiple instances — each shortcode creates an independent AvailCalendar class instance; safe to use several times on the same page

Example of Display

Elementor Integration

Note that the number of months can be selected independantly for desktop, tablet, and mobile size.

Installation

1. Download or clone this repository
2. Copy the availability-calendar-for-beds24 folder to your WordPress installation's /wp-content/plugins/ directory
3. Activate the plugin via Plugins → Installed Plugins in WordPress admin

Shortcode Usage

[avail_calendar roomid="12345" nummonths="5" lang="fr"]
[avail_calendar propid="67890" nummonths="3" lang="en"]

Attributes

Architecture

availability-calendar-for-beds24/
├── availability-calendar-for-beds24.php   ← Plugin entry point, shortcode, footer init
├── assets/
│   ├── calendar.css                       ← Scoped styles (.bac-wrapper)
│   └── calendar.js                        ← AvailCalendar class
└── readme.txt                             ← WordPress plugin readme

How it works

1. Each [avail_calendar] shortcode renders a <div id="bac-{unique}"> container and registers its config.
2. A single `