blazor-devexpress-dot-blazor-dot-dxcalendar-1-69fc35a0.md
Specifies the template used to display day cells.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public RenderFragment<DateTime> DayCellTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<DateTime> |
The template content.
|
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);
}
}
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
See Also