This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: How to change calendar colour?

#28859
Ernest MarcinkoErnest Marcinko
Keymaster

Hi,

The styling of the datepicker is mostly inherent from the WordPress core, but some themes or plugins may add additional styling to it. There are no options to change that on the back-end, but you can use custom CSS to force a correct font color:

.ui-datepicker-title select,
.ui-datepicker-title select option {
    color: #232323 !important;
}

If you want, you can change the background of the header as well as the selection:

div.asp-ui .ui-widget-header {
    background: red;
}

div.asp-ui.ui-datepicker .ui-state-active {
    background: red;
    border: none;
}

The number of years displayed in the selection is a bit more difficult, I’m not sure if I recommend altering that, but you can use a custom CSS like this:

.ui-datepicker-title select option[value="2003"],
.ui-datepicker-title select option[value="2004"],
.ui-datepicker-title select option[value="2005"] {
    display: none !important;
}

All you need to do with this, is make a copy of the first line, and add the values (years), that you don’t want to display in the datepicker drop-down.