Skip to main content

DxCalendar<T>.DayCellTemplate Property

Specifies the template used to display day cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor


public RenderFragment<DateTime> DayCellTemplate { get; set; }

Property Value

Type Description

The template content.


Use the template’s context parameter to access the current date-time object and its settings.

@using Data

<DxCalendar T="DateTime">
        <a class="@GetCssClassNames(context)">@context.Day.ToString()</a>

@code {
    CalendarData data = new CalendarData();

    string GetCssClassNames(DateTime date) {
        string result = string.Empty;

        if (data.PersonalDays.Exists(d => DaysEqual(d, date)))
            result = "font-weight-bold text-success";
        if (data.Holidays.Exists(d => DaysEqual(d, date)))
            result = "text-danger";
        if (data.BirthDates.Exists(d => DaysEqual(d, date)))
            result += "font-weight-bold text-info";

        return result;
    bool DaysEqual(DateTime date1, DateTime date2) {
        return (date1.Year == date2.Year && date1.DayOfYear == date2.DayOfYear);


Calendar Day Cell Customization

Run Demo: Calendar - Day Cell Customization

Watch Video

See Also