Styling of the RadzenDatePicker

Radzen.Blazor Components
1

Hi
I'm struggling with the styling of the calendar popup of the RadzenDatePicker.
I'm trying to adjust the background color of the header row and the dates.
But nothing I tried seems to have any effect.
What I've tried so far;

  • using the ::DEEP pseudo-element on table elements in the ...razor.css file of the razor file that contains the datepicker.
::deep table {
    background-color: aliceblue !important;
}
  • using the ::DEEP pseudo-element on .rz-datepicker-calendar element in the ...razor.css file of the razor file that contains the datepicker.
::deep .rz-datepicker-calendar {
    background-color: aliceblue !important;
}
  • the best shot so far was adding a DateRender method to the DatePicker:
        private void DateRender(DateRenderEventArgs args)
        {
            args.Attributes.Add("style", "background-color: #ff6d41; border-color: white;");
        }

But this only changes the backgound color of the dates, not the headers..
Surely there must be a simple way to achieve this.

Thnx in advance for your help
Henk

2

Hi @hjdrent,

The datepicker popup is rendered at the end of the body element for positioning purposes. I am not sure if the ::deep selector would work in this case. You can try adding this css to a CSS file included in the application or a style element.

.rz-datepicker-calendar {
    background-color: aliceblue !important;
}
3

Hi
Putting it in the site.css works, as you expected. Thanx.
Only disadvantage is that it will work througout the whole application. Not a problem at the moment, but it may become one later.