How to set different days colors in calendar depend from availability ?

This feature possible to configure, only in the Booking Calendar Business Large or higher versions. Because only in these versions possible to set capacity per calendar, and to have different availability per days depend from number of bookings. Please check more about this here:

1) Firstly please check this instruction how possible to configure your calendar skin by modification CSS file:

2) Then you need to activate this Calendar Skin: "Multidays" at the Booking Settings General page in Calendar section.

This calendar skin have special CSS classes for ability to define different colors in calendar depend from capacity of booking resource (calendar) and number of bookings per specific date(s) (in other words based on availability on specific date). Probably you will be need to copy this calendar skin to separate folder, as explained in above instruction for future customization.

3) Each calendar day cells (in this calendar skin) have specific CSS classes like:

The number at the end of this class is explain the availability per specific days.

So in case (if you have capacity per booking resource as 10) you can configure in your calendar skin these colors for the different color for the different availability:
You can just add this code to the bottom of that calendar skin.

/* Partially availability: 1-7 */
.datepick-inline .reserved_days_count1,
.datepick-inline .reserved_days_count2,
.datepick-inline .reserved_days_count3,
.datepick-inline .reserved_days_count4,
.datepick-inline .reserved_days_count5,
.datepick-inline .reserved_days_count6,
.datepick-inline .reserved_days_count7{
    background-color: #eb5;
     color: #eeeeee;
     text-shadow: 0px -1px 0px #888888;
/* Availability 8-10 */
.datepick-inline .reserved_days_count8,
.datepick-inline .reserved_days_count9,
.datepick-inline .reserved_days_count10 {
    background-color: #1A5;
     color: #eeeeee;
     text-shadow: 0px -1px 0px #888888;
/* Approved */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved,
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved div.check-out-div {
    background-color: #ee5933;
/* Pending */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve,
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div.check-out-div {
  background-color: #ee5933;

P.S. Please do not forget to clear browser cache before testing these changes.

How to change the colors of labels in booking form?

This customization is only for the Booking Calendar Free version. In the paid versions, you can easily configure booking form fields and their style at the advanced form configuration at the Booking > Settings > Fields page.

1) Please open this file ../wp-content/plugins/{Booking Calendar Folder}/css/client.css
and add to the bottom of that file this code:

.booking_form .control-label {
  color: #FFF;

Of course instead of white color #FFF you can set some other.

2) In the same way possible to change the color of text inside of the text fields, text-area elements and selectboxes. You need to add to the bottom of this file ../wp-content/plugins/{Booking Calendar Folder}/css/client.css this code:

.booking_form_div select,
.booking_form_div textarea,
.booking_form_div input[type="text"] {
  color: #FFF;

Again instead of white color #FFF you can set some other color.

Important! Please note after update of plugin to the newer version update, you will be need to make this fix again, because all Booking Calendar files will be overwritten.

How to edit calendar skin and define own colors in calendar?

Since update 4.2 of the Booking Calendar the calendar structure CSS file is located at the ../booking/css/calendar.css (please do not edit it or edit it very carefully). The calendar color skins are located in the ../booking/css/skins folder. Inside of these files (for better compatibility), please modify only following parameters:
* background , background-color, background-repeat, background-image, background-repeat, background-position
* border
* box-shadow, -moz-box-shadow, -webkit-box-shadow
* border-radius, -moz-border-radius, -webkit-border-radius
* color
* font-weight
* text-shadow
* text-transform

If you want to add new style.
Go to the folder “BOOKING_PLUGIN_PATH/css/skins/” and add new CSS file (the template you can get from this directory) to this directory. After this select this file at the general booking settings page and save settings.
If you want to customize exist skin.
Go to the folder “BOOKING_PLUGIN_PATH/css/skins/” open your file from this directory and customize it. After customization you need to select this style at the general booking settings page and save settings.

Important! Please note, if you will make upgrade of plugin to the new update, all plugin files is overwriting. Its means that your custom calendar skin also will be overwriting. That's why please backup your custom calendar skin before update and then restore it after update process.

Since new update 5.4 you do not need to backup/restore your custom calendar skins anymore. Just put your custom calendar skin to the special folder. Please save your own custom calendar skin to the /wp-content/uploads/wpbc_skins/ folder. You need to create this folder /wpbc_skins/ inside of your /wp-content/uploads/ folder, because this folder has not created automatically. Its will save your custom calendar skin, if you will make upgrade of plugin to new plugin update.

You can check this instruction how to edit CSS file from WordPress menu.