How to Change the Fluent Booking Calendar’s Default Colours

If you are using the Fluent Booking plugin from WP Manage Ninja, here’s how to change the default colours to your own brand.

Introduction #

FluentBooking is the ultimate solution for booking appointments, meetings, webinars, events, sales calls, and more from WP Manage Ninja.

Problem #

The Fluent Booking plugin does not have a built-in UI that allows you to customize the colours of your calendar when it’s displayed on your web page. If you’re like me, branding is key and I want to maintain the look and feel of my website.

Solution #

The solution is simple. Copy & Paste the following CSS code into your WordPress site using Appearance > Customize > Additional CSS. Then, change the HEX code to your own brand’s colours. That’s it!

/

:root {
    --fcal_primary_color: #be9be0 !important;
    --date-picker-hover-background: #be9be0 !important;
    --date-picker-selected-background: #be9be0 !important;
    --date-picker-highlight-border: #be9be0 !important;
}