DxDateEditSettings.DayCellTemplate Property

Specifies the template used to display day cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.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.

Razor

<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);
    }
}

C#

class CalendarData {
    public CalendarData() {
        PersonalDays = StartOfTrainingDate();
        Holidays = GetHolidays();
        BirthDates = ConferenceDay();
    }
    public List<DateTime> PersonalDays { get; }
    public List<DateTime> Holidays { get; }
    public List<DateTime> BirthDates { get; }
    List<DateTime> StartOfTrainingDate() {
        return new List<DateTime>() {
                new DateTime(2023,05,04),
                new DateTime(2023,05,11),
                new DateTime(2023,05,18),
                new DateTime(2023,05,25)
        };
    }
    List<DateTime> GetHolidays() {
        return new List<DateTime>() {
                new DateTime(DateTime.Today.Year,05,01),
                new DateTime(DateTime.Today.Year,05,02),
                new DateTime(DateTime.Today.Year,05,29)

        };
    }
    List<DateTime> ConferenceDay() {
        return new List<DateTime>() {
                new DateTime(2023,05,15),
                new DateTime(2023,05,16),
                new DateTime(2023,05,17),
                new DateTime(2023,05,26)
        };
    }
}

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

Implements

DayCellTemplate