DxCalendar<T>.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>	The template content.

Remarks

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

Razor

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

}

CalendarData

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Calendar.Data {
    public 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