How to customize using CssClass in Blazor DateRangePicker

14 Aug 20264 minutes to read

To customize the UI, you can use the CssClass property, which is added to the DateRangePicker component as the root CSS class. With this CSS class, you can override the existing styles of the DateRangePicker.

The following is the list of classes that provide a flexible way to customize the DateRangePicker component.

Class Name	Description
e-date-range-wrapper	Applied to the DateRangePicker wrapper.
e-range-icon	Applied to the DateRangePicker icon.
e-popup	Applied to the DateRangePicker popup wrapper.
e-calendar	Applied to both calendar elements.
e-right-calendar	Applied to the right calendar element.
e-left-calendar	Applied to the left calendar element.
e-start-label	Applied to the start label in the popup.
e-end-calendar	Applied to the end calendar element.
e-day-span	Applied to the day span details label in the popup.
e-footer	Applied to the footer elements in the popup.
e-apply	Applied to the Apply button in the footer of the popup.
e-cancel	Applied to the Cancel button in the footer of the popup.
e-header	Applied to the calendar header.
e-title	Applied to the calendar title.
e-icon-container	Applied to the calendar previous and next icon container.
e-prev	Applied to the calendar previous icon.
e-next	Applied to the calendar next icon.
e-weekend	Applied to the calendar weekend dates.
e-other-month	Applied to the calendar other-month dates.
e-day	Applied to each day cell of the calendar.
e-selected	Applied to the calendar selected dates.
e-disabled	Applied to the calendar disabled dates.

@using Syncfusion.Blazor.Calendars

<SfDateRangePicker TValue="DateTime?" Placeholder="Select a range" CssClass="CustomCSS" ></SfDateRangePicker>

<style>
     .CustomCSS .e-calendar .e-content .e-selected span.e-day,
    .CustomCSS .e-calendar .e-content .e-selected span.e-day:hover,
    .CustomCSS .e-calendar .e-content .e-today.e-selected:hover span.e-day,
    .CustomCSS .e-calendar .e-content .e-today.e-selected span.e-day,
    .CustomCSS .e-calendar .e-content .e-selected:hover span.e-day  {
        background-color: #35b86b;
    }

    .CustomCSS .e-calendar .e-content .e-today span.e-day,
    .CustomCSS .e-calendar .e-content .e-focused-date.e-today span.e-day {
        border: 1px solid #35b86b;
        color: #ff3337;
    }

    .CustomCSS .e-calendar .e-content .e-weekend span {
        color: #ff3337;
    }

    .CustomCSS.e-date-range-wrapper .e-input-group-icon.e-icons.e-active,
    .CustomCSS .e-btn.e-flat,
    .CustomCSS .e-btn.e-flat:hover {
        color: #35b86b;
    }
</style>

NOTE

You can refer to our Blazor Date Range Picker feature tour page for its groundbreaking feature representations. You can also explore our Blazor Date Range Picker example to understand how to present and manipulate data.