CssClass Customization for specific dates

[ERDASA]

Hello:

I would like to know if it is possible to highlight specific dates in the DateRange Picker.  In my case, to show holidays in a different color in the calendar.

Best regards,

Hans K.

[Yohapuja Selvakumaran]

Hi Hans K,

Thank you for reaching out to us regarding your request to highlight specific dates in the DateRange Picker. We have reviewed your requirement and created a sample to demonstrate how to highlight special dates, such as holidays, in a different color.

Please find the sample and code snippet below for your reference:

Sample:  https://blazorplayground.syncfusion.com/LXLpXPLFpyRySuHK

Code Snippet:

 

    <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range">

        <DateRangePickerEvents TValue="DateTime?" OnRenderDayCell="CustomDates"></DateRangePickerEvents>

    </SfDateRangePicker>

 

@code{

  public void CustomDates(RenderDayCellEventArgs args)

    {

        if (args.Date.DayOfWeek == DayOfWeek.Sunday)

        {  

            args.CellData.ClassList += " personal-appointment";

        }

    }

}

 

 

<style>

 

    .e-calendar .e-content .e-cell.personal-appointment span.e-day,

    .e-calendar .e-content td:hover.e-cell.personal-appointment span.e-day,

    .e-calendar .e-content td.e-selected.e-focused-date.e-cell.personal-appointment span.e-day {

        color: #28a745;

        font-weight: 800;

    }

 

 

</style>

 

In this example, we’ve highlighted Sundays as a demonstration. You can adjust the CustomDates method to highlight other dates as needed. Feel free to modify the CSS to fit your desired style for holidays or special dates.

If you have any further questions or need additional assistance, please don’t hesitate to ask. We’re here to help!

Regards,

Yohapuja S

[ERDASA]

Hello:

Thank you for your reply.  Your suggestion was indeed what we were looking for.

Regards,

Hans K.