Booking Calendar: Styling your calendar

By default, the Booking Calendar is styled with "Helvetica' for the font and shades of blue. You may want to match the styling of your website and this can be accomplished using the example below. 

Here is a bit of code you can place either in a code snippets plugin or in your themes functions.php file.

<?php
add_action( 'wp_head', function () { ?>
<style>
/* Calendar Name*/
h1.calendar-name {
color: red;
}
/* Owner Name*/
h4.owner-name {
color:blue;
}
/* Today highlighted date */
a.ui-state-default.ui-state-highlight.ui-state-active {
background: darkgreen;
color: lightgreen;
}
/* Other dates */
.groundhogg-calendar td .ui-state-default {
background: lightgray;
color: #000;
}

/* Calendar Name(H1), Owner name(h4) */
.groundhogg-calendar #calendar-details h1, h4 {
font-family: Georgia;
}
/* Calendar description */
.groundhogg-calendar #calendar-details .text-details .description p {
font-family: Georgia;
}
/* Details length and time zone */
.groundhogg-calendar #calendar-details .text-details .details .details-length, .details-zone {
font-family: Georgia;
}
/* Calendar Month / Days */
.groundhogg-calendar #calendar-date-picker .ui-datepicker-title span, .ui-datepicker-calendar span{
font-family: Georgia;
}
</style>
<?php } );