Skip to content

Instantly share code, notes, and snippets.

@MindyPostoff
Last active September 10, 2023 03:45
Show Gist options
  • Save MindyPostoff/2e140ce14c1911d7dc70 to your computer and use it in GitHub Desktop.
Save MindyPostoff/2e140ce14c1911d7dc70 to your computer and use it in GitHub Desktop.
Bookings Datepicker Color Styles
/*
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;
}
/* Partially Booked Red Triangle */
.wc-bookings-date-picker .ui-datepicker td.partial_booked a:after {
border-bottom: none; /* This style removes the red triangle */
}
/* 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;
}
@MNH1234
Copy link

MNH1234 commented Apr 30, 2021

Hi. Can this be adapted for changing the colour of bookings on the backend 'bookings calendar'. I'm using the bookings barcode plugin and want the colour of bookings to change when they are 'checked in', but can't for the life of me work out how to code it.

@REWCHILE
Copy link

how i can change Booking costs block hover for default is dark, i need change the color

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment