FAQ > Styles and CSS customization > How to Customize Calendar Colors in Booking Calendar

How to Customize Calendar Colors in Booking Calendar

The latest versions of the Booking Calendar plugin define calendar skin styles using CSS custom properties (variables). This makes it easier to customize colors and layout styles for your calendar.
Where to Find the Calendar Skins
Each calendar skin is a CSS file located in this folder: ../wp-content/plugins/booking/css/skins/

Here is an example of a typical skin file:


/* ------------------------------------------------------------------------------------------------------------------ */
/* Child calendar theme    of    "/css/skins/24_9__light.css"                          C O L O R    S K I N           */
/* ------------------------------------------------------------------------------------------------------------------ */
@import url("24_9__light.css");
/* Color Scheme: - 25_5 Square 2 */
:root {
	--wpbc_cal-day-cell-border-radius: 11%;
	--wpbc_cal-day-cell-border-width: 2px;
	--wpbc_cal-day-bg-color-opacity: 7%;
	--wpbc_cal-selected-day-bg-color-opacity: 80%;
	--wpbc_cal-text-general-size: 15px;
	--wpbc_cal-text-cost-size: 60%;
	--wpbc_cal-text-header-size: 13px;
	--wpbc_cal-text-weekdays-size: 10px;
	--wpbc_cal-text-prev-next-links-size: 25px;
	--wpbc_cal-main-background-color: #fff;
	--wpbc_cal-header-text-color: #000;
	--wpbc_cal-text-prev-next-links-color: #555;
	--wpbc_cal-text-weekdays-color: #555;
	--wpbc_cal-unavailable-day-color: var(--wpbc_cal-main-background-color);
	--wpbc_cal-unavailable-text-color: #d4d4d4c7;
	--wpbc_cal-available-day-color: #fdfffb;
	--wpbc_cal-available-text-color: #463a3d;
	--wpbc_cal-approved-day-color: #6a595e;
	--wpbc_cal-approved-text-color: #716266;
	--wpbc_cal-pending-day-color: #c7b8ae;
	--wpbc_cal-pending-text-color: #a79c95;
	--wpbc_cal-selected-day-color: #5b89c5;
	--wpbc_cal-selected-text-color: #fff;
	--wpbc_cal-hover-day-color: #7195c6;
	--wpbc_cal-hover-text-color: #436593;
	--wpbc_cal-timespartly-day-color: #879d56;
	--wpbc_cal-timespartly-text-color: #879d56;
	--wpbc_cal-day-cells-padding: 2px;
}

Calendar Skin CSS Variables – Description

  • --wpbc_cal-day-cell-border-radius: Controls the roundness of the day cell corners. Higher value = more rounded corners.
  • --wpbc_cal-day-cell-border-width: Sets the thickness of the border around each day cell.
  • --wpbc_cal-day-bg-color-opacity: Defines the background transparency level of normal days (0% = fully transparent, 100% = fully solid).
  • --wpbc_cal-selected-day-bg-color-opacity: Controls the background transparency of selected days.
  • --wpbc_cal-text-general-size: Sets the base font size for general calendar text.
  • --wpbc_cal-text-cost-size: Defines the font size for the cost text inside a date cell (in percentage of general size).
  • --wpbc_cal-text-header-size: Sets the font size for the month and year header text.
  • --wpbc_cal-text-weekdays-size: Specifies the font size for the weekday labels (e.g., Mon, Tue, etc.).
  • --wpbc_cal-text-prev-next-links-size: Controls the font size of the previous/next month navigation arrows.
  • --wpbc_cal-main-background-color: Background color of the entire calendar area.
  • --wpbc_cal-header-text-color: Text color used for the calendar’s month and year header.
  • --wpbc_cal-text-prev-next-links-color: Color of the previous and next navigation arrows.
  • --wpbc_cal-text-weekdays-color: Color of the weekday labels at the top of the calendar.
  • --wpbc_cal-unavailable-day-color: Background color for days that are unavailable for booking.
  • --wpbc_cal-unavailable-text-color: Text color for unavailable days.
  • --wpbc_cal-available-day-color: Background color for available (bookable) days.
  • --wpbc_cal-available-text-color: Text color used on available days.
  • --wpbc_cal-approved-day-color: Background color for days with approved bookings.
  • --wpbc_cal-approved-text-color: Text color for days with approved bookings.
  • --wpbc_cal-pending-day-color: Background color for days with pending bookings.
  • --wpbc_cal-pending-text-color: Text color for days with pending bookings.
  • --wpbc_cal-selected-day-color: Background color of a day cell that is currently selected by the user.
  • --wpbc_cal-selected-text-color: Text color of the selected day.
  • --wpbc_cal-hover-day-color: Background color shown when hovering over a day with the mouse.
  • --wpbc_cal-hover-text-color: Text color shown on a hovered day.
  • --wpbc_cal-timespartly-day-color: Background color for partially booked time slots (used in time-slot mode).
  • --wpbc_cal-timespartly-text-color: Text color for partially booked time slots.
  • --wpbc_cal-day-cells-padding: Padding inside each day cell (space between text and cell border).

How to Customize the Calendar Style

To change the calendar's appearance, modify only the values of CSS variables (--wpbc_*) within the skin file. Avoid editing other CSS files used by the calendar, as these may be overwritten during plugin updates or may cause layout issues.

How to Keep Your Changes Safe
To make sure your custom styles are preserved after plugin updates:

  • Save your custom skin file in: /wp-content/uploads/wpbc_skins/
  • Apply your custom skin via: WP Booking Calendar > Settings > Appearance / Color Theme

Alternatively, you can add your CSS directly into your theme's stylesheet. For more info, see this guide: How to edit the file in WP menu (CSS Theme Editor).

Important: Clear Your Browser Cache
After making style changes, clear your browser cache to ensure the updated styles are loaded properly. Also please clear all minimized CSS and JavaScript files and cached pages or posts.