Applies to: Availability-based coloring requires Business Medimum / Large or higher (capacity per calendar available in Booking Calendar Business Large version).
Skins: Works with all modern (non-legacy) calendar skins.
Why: Help visitors instantly see which dates have more/less availability and which dates belong to different price (seasonal rate) tiers.

How it works

Modern skins expose CSS hooks on each day cell:

• Availability level: .reserved_days_countN (where N is the availability level for that day, capacity-aware).
• Seasonal rate: rate class on the day (e.g., .rate_50, .rate_100).

Set the CSS custom property that the skins read: --wpbc_cal-available-day-color

Apply it to available days with selectors like:

.datepick-days-cell.date_available.reserved_days_countN { 
  --wpbc_cal-available-day-color: ... 
}

Tip: For exact class names present on your site, right-click a date -> Inspect in your browser.

Example: color ranges by availability (capacity = 10)

/* Booking Calendar 10.10+ — availability-based coloring on modern skins */

/* Low–medium availability (1–7) */
.datepick-days-cell.date_available.reserved_days_count1,
.datepick-days-cell.date_available.reserved_days_count2,
.datepick-days-cell.date_available.reserved_days_count3,
.datepick-days-cell.date_available.reserved_days_count4,
.datepick-days-cell.date_available.reserved_days_count5,
.datepick-days-cell.date_available.reserved_days_count6,
.datepick-days-cell.date_available.reserved_days_count7 {
  --wpbc_cal-available-day-color: #eb5; /* amber-ish */
}

/* Higher availability (8–10) */
.datepick-days-cell.date_available.reserved_days_count8,
.datepick-days-cell.date_available.reserved_days_count9,
.datepick-days-cell.date_available.reserved_days_count10 {
  --wpbc_cal-available-day-color: #1A5; /* green-ish */
}

Adjust to your capacity: If your calendar’s capacity isn’t 10, add/remove the

.reserved_days_countN

selectors so the ranges match your actual maximum.

Example: color by seasonal rates (e.g., €50 vs €100)

Use the rate classes you see in your markup (replace .rate_50 / .rate_100 with yours):

/* Seasonal rate-based colors */
.rate_50 .wpbc-cell-box {
  --wpbc_cal-available-day-color: #795;
}
.rate_100 .wpbc-cell-box {
  --wpbc_cal-available-day-color: #8a1;
}

Precedence tip: If you want rate colors to override availability colors, place the
rate rules after the availability rules or use a more specific selector
(e.g., .datepick-days-cell.date_available.rate_100 .wpbc-cell-box).

Clear caches & test

1. Clear your browser cache.
2. Purge any caching plugin/CDN caches.
3. Reload the calendar page and verify the colors across dates.

Troubleshooting

• No color changes? Make sure you’re on a modern (non-legacy) skin, your CSS is loading,
  and you’re targeting

  .datepick-days-cell.date_available

  (not booked/blocked states).

• Capacity differs? Expand or shrink the

  .reserved_days_countN

  selectors to match your real capacity.

• Rate classes don’t match examples? Inspect a date cell to find the exact

  .rate_*

  (or slugged)
  class used on your site, then update the CSS selectors.