Skip to main content

DxDateEditSettings.DayCellTemplate Property

Specifies the template used to display day cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type Description
RenderFragment<DateTime>

Template content.

Remarks

The DayCellTemplate property allows you to customize cell content and style in the date editor’s calendar. Use the template’s context parameter to access the current date-time object and its settings.

The following code snippet applies different styles to different dates.

<DxGrid Data="@employees" EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="HireDate" >
             <EditSettings>
                <DxDateEditSettings>
                    <DayCellTemplate>
                        <a class="@GetCssClassNames(context)">@context.Day.ToString()</a>
                    </DayCellTemplate>
                </DxDateEditSettings>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Email" />
    </Columns>
</DxGrid>

@code {
    Employee[]? employees;
    CalendarData Data { get; set; } = new CalendarData();

    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }

    string GetCssClassNames(DateTime date) {
        if(Data.PersonalDays.Exists(d => DaysEqual(d, date)))
            return "fw-bold text-success";
        if(Data.Holidays.Exists(d => DaysEqual(d, date)))
            return "text-danger";
        if(Data.BirthDates.Exists(d => DaysEqual(d, date)))
            return "fw-bold text-info";
        return string.Empty;
    }
    bool DaysEqual(DateTime date1, DateTime date2) {
        return (date1.Year == date2.Year && date1.DayOfYear == date2.DayOfYear);
    }
}

Date Editor Cell Template

To specify the day cell template at runtime, use the IDateEditSettings.DayCellTemplate property instead.

Implements

See Also