How to set the header colour of bootstrap vue date form picker?

Question

I am using bootstrapvue's form date picker. How do I achieve the following?

1. Change the header colour, ie where the Month is
2. Change the day colour while hovered over? Currently it's grey by default
3. Currently you can change the selected date's colour via the property selected-variant but it only accepts:

'secondary', 'success', 'danger', 'warning', 'info'

Is there a way I can pass in a hex value?

I've been looking at the docs, but wasn't able to find information for above: https://bootstrap-vue.org/docs/components/form-datepicker

Answer 1

Here you go...

1. Change the header colour, ie where the Month is

.b-calendar .b-calendar-grid-caption {
    background-color: yellow;
}

2. Change the day colour while hovered over? Currently it's grey by default

span.btn.border-0.rounded-circle.text-nowrap.btn-outline-light.text-dark.font-weight-bold:hover {
    background-color: yellow;
}

3. Currently you can change the selected date's colour via the property selected-variant but it only accepts: 'secondary', 'success', 'danger', 'warning', 'info'

[aria-selected="true"] > span {
    background-color: yellow !important;
}