DxCalendar<T>.DayCellTemplate Property

Specifies the template used to display day cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<DateTime> DayCellTemplate { get; set; }

Property Value

Type Description
RenderFragment<DateTime>

The template content.

Remarks

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

@using Data

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

@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