---
title: Changing availability calendar day colors
description: You can change the colors your availability calendar uses for booked, blocked, and available days. These colors are controlled in the HomeRunner plugin…
url: "https://homerunner.io/docs/how-do-i-change-the-availability-calendar-colors-for-booked-blocked-and-availabl/"
updated: "2026-10-26"
category: Booking engine and checkout
---

# Changing availability calendar day colors

You can change the colors your availability calendar uses for booked, blocked, and available days. These colors are controlled in the HomeRunner plugin settings, so you do not need custom CSS or template edits.

**Where the settings are.** In the HomeRunner settings panel, open the **Availability Calendar** section (**Styles** section). Each day state has a **Background** field and a **Color** field. The states are **Selectable** (available dates, default light green), **Booked** (guest reservations, default background #fdd2d2 and text #881616, which appears red), and **Blocked** (owner or internal blocks, default gray background #eee). There are also **Selected**, **Disabled**, **Unavailable**, and **Passthrough** states.

**Common changes.** To change booked days from the default pink or red, update **Booked - Background** and **Booked - Color** to your preferred values. To tint available days, update **Selectable - Background**. To make internal blocks look the same as booked dates, set **Blocked - Background** to #fdd2d2 and **Blocked - Color** to #881616. This change also applies to the diagonal half-day edge cells at the start and end of a blocked range.

The same colors apply to both the in-page calendar and the date-picker popup. After you save, clear your site's page cache so visitors see the new colors.

**If the colors do not update.** CSS overrides for the calendar in a theme or template customizer silently override these settings, which can make the panel appear not to work. If the colors are not updating as expected, remove any such overrides.

Still stuck? [Contact the HomeRunner team](https://homerunner.io/contact/) with your site address and what you tried, and we take it from there.