DxCalendar<T>.DayCellTemplate Property

Specifies the template used to display day cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

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.

Razor

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

CalendarData

class CalendarData {

    public CalendarData() {
        DateTime baseDate = DateTime.Today;
        PersonalDays = GetPersonalDays(baseDate);
        Holidays = GetHolidays(baseDate);
        BirthDates = GetBirthDates(baseDate);
    }

    public List<DateTime> PersonalDays { get; }
    public List<DateTime> Holidays { get; }
    public List<DateTime> BirthDates { get; }

    List<DateTime> GetPersonalDays(DateTime baseDate) {
        return new List<DateTime>() {
            baseDate.AddDays(-7),
            baseDate.AddDays(-2),
            baseDate.AddDays(-1),
            baseDate.AddDays(3),
            baseDate.AddDays(4),
            baseDate.AddDays(9),
            baseDate.AddDays(10),
            baseDate.AddDays(12),
            baseDate.AddDays(15)
        };
    }

    List<DateTime> GetHolidays(DateTime baseDate) {
        return new List<DateTime>() {
            baseDate.AddDays(-14),
            baseDate.AddDays(-8),
            baseDate.AddDays(12),
            baseDate.AddDays(13)
        };
    }

    List<DateTime> GetBirthDates(DateTime baseDate) {
        return new List<DateTime>() {
            baseDate.AddDays(-20),
            baseDate.AddDays(-5),
            baseDate,
            baseDate.AddDays(1),
            baseDate.AddDays(6),
            baseDate.AddDays(7),
            baseDate.AddDays(17)
        };
    }
}

Run Demo: Calendar - Day Cell Customization

Watch Video