If you want to change the color scheme of the WooCommerce Bookings calendar of the customer view, you can do so by modifying a few CSS styles.
If you are not using a child theme for WordPress or your theme does not allow you to enter custom CSS, perhaps you can install the Jetpack plugin which has a Custom CSS Editor built in.
Note: This is a Developer level doc. If you are unfamiliar with code and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our Support Policy.
Here are the styles for the different calendar elements:
| /* | |
| Modify the color styles of the WooCommerce Bookings datepicker calendar. | |
| Add any/all of these styles to your theme’s custom CSS, but be sure to change | |
| the color hex codes to your choice. They’re all black here. | |
| */ | |
| /* Month header background color */ | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker-header { | |
| background-color: #000000; | |
| } | |
| /* Previous/Next month arrow background color */ | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next, | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev { | |
| background-color: #000000; | |
| } | |
| /* Previous/Next month arrows if not allowed, and calendar dates that are not available */ | |
| .ui-state-disabled, | |
| .ui-widget-content .ui-state-disabled, | |
| .ui-widget-header .ui-state-disabled { | |
| opacity: 0.35; | |
| } | |
| /* Days of the week header background color */ | |
| .ui-datepicker-calendar thead { | |
| background-color: #000000; | |
| } | |
| /* Days of the week header font color */ | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th { | |
| color: #000000; | |
| } | |
| /* Past calendar days background color (not available) */ | |
| .ui-datepicker-calendar tbody { | |
| background-color: #000000; | |
| } | |
| /* Available calendar days background color */ | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a { | |
| background-color: #000000 !important; | |
| } | |
| /* Available calendar day hover background color */ | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a:hover { | |
| background-color: #000000 !important; | |
| } | |
| /* Fully booked calendar days */ | |
| .wc-bookings-date-picker .ui-datepicker td.fully_booked a, | |
| .wc-bookings-date-picker .ui-datepicker td.fully_booked span { | |
| background-color: #000000 !important; | |
| } | |
| /* Days not bookable based on the availability rules */ | |
| .wc-bookings-date-picker .ui-datepicker td.not_bookable { | |
| background-color: #FFFFFF !important; | |
| } | |
| /* Today’s date on calendar background color */ | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today a { | |
| background-color: #000000 !important; | |
| } | |
| /* Time Blocks */ | |
| #wc-bookings-booking-form .block-picker li a { | |
| background-color: #FFFFFF !important; | |
| } | |
| /* Time Blocks Hover */ | |
| #wc-bookings-booking-form .block-picker li a:hover { | |
| background-color: #000000 !important; | |
| } | |
| /* Selected Date*/ | |
| #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a { | |
| background-color: #000000 !important; | |
| } | |
| /* Selected Time Block */ | |
| #wc-bookings-booking-form .block-picker li a.selected { | |
| background: #ffffff !important; | |
| } |