Skip to main content
View Categories

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.