Can I highlight certain dates using a colour in the MudBlazor DatePicker?

Question

I'm rewriting an ASP.NET WebForms App in Blazor and I would like to replace the Calendar Control with something like the MudBlazor DatePicker (or similar) - one essential feature I need is to be able to highlight certain dates using a colour. In the sample image below some dates need to be highlighted in red due to a condition such as a room not available.

ASP.NET WebForms Calendar Control with colour highlighting

I've looked through the MudBlazor documentation but don't see a way to achieve this.

Answer 1

You can do this using the AdditionalDateClassesFunc attribute on the MudDatePicker component. Here's a simple example that will turn the date red for specific days.

<MudDatePicker Label="Color Dates" @bind-Date="SelectedDate" AdditionalDateClassesFunc="CheckDate"></MudDatePicker>

@code {
    private DateTime? SelectedDate { get; set; }
    private List<DateTime> specialDates = new List<DateTime>
        {
            new (2023, 3, 5),
            new (2023, 3, 15)
        };
    
    private string CheckDate(DateTime date)
    {
        // compare only the date portion to find a match
        return this.specialDates.Contains(date.Date) ? "special-day" : string.Empty;
    }
}

<style>
    .special-day {
        color: red !important;
    }
</style>