blazor-devexpress-dot-blazor-e5a450ca.md
Stores information about a Scheduler’s header cell that displays a date.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class SchedulerDateHeaderCellInfo
A SchedulerDateHeaderCellInfo object is passed as the context parameter to the following templates:
The parameter’s properties allow you to specify the following:
The following code snippet highlights weekends with color:
<DxScheduler @bind-StartDate="@StartDate" DataStorage="@DataStorage" CssClass="demo-sc-size">
<Views>
<DxSchedulerDayView DayCount="5" ShowWorkTimeOnly="true">
<DateHeaderCellTemplate>
<div class="@GetDateCssClass(context.Interval.Start)">
<span class="scheduler-date">@context.Interval.Start.Day</span>
<span>@context.Interval.Start.ToString("ddd")</span>
</div>
</DateHeaderCellTemplate>
</DxSchedulerDayView>
</Views>
</DxScheduler>
@code {
DateTime StartDate { get; set; } = DateTime.Today;
DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage()
{
AppointmentsSource = AppointmentCollection.GetAppointments(),
AppointmentMappings = new DxSchedulerAppointmentMappings()
{
Type = "AppointmentType",
Start = "StartDate",
End = "EndDate",
Subject = "Caption",
AllDay = "AllDay",
Location = "Location",
Description = "Description",
LabelId = "Label",
StatusId = "Status",
RecurrenceInfo = "Recurrence"
}
};
string GetDateCssClass(DateTime date)
{
if(date.DayOfWeek == DayOfWeek.Sunday
|| date.DayOfWeek == DayOfWeek.Saturday) return "scheduler-weekend";
else return "scheduler-weekday";
}
}
.scheduler-weekday {
color: grey;
}
.scheduler-weekend {
color: darkred;
}
.scheduler-date {
padding-right: 3px;
font-size: 20px;
font-weight: 600;
}
public class Appointment
{
public Appointment() { }
public int AppointmentType { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Caption { get; set; }
public string Description { get; set; }
public string Location { get; set; }
public int? Label { get; set; }
public int Status { get; set; }
public bool AllDay { get; set; }
public string Recurrence { get; set; }
public int? ResourceId { get; set; }
public string Resources { get; set; }
public bool Accepted { get; set; }
}
public static partial class AppointmentCollection
{
public static List<Appointment> GetAppointments()
{
DateTime date = DateTime.Today;
var dataSource = new List<Appointment>() {
new Appointment {
Caption = "Install New Router in Dev Room",
StartDate = date + (new TimeSpan(0, 10, 0, 0)),
EndDate = date + (new TimeSpan(0, 12, 30, 0)),
Label = 6,
Status = 4
},
new Appointment {
Caption = "Upgrade Personal Computers",
StartDate = date + (new TimeSpan(0, 13, 0, 0)),
EndDate = date + (new TimeSpan(0, 15, 30, 0)),
Label = 1,
Status = 4
},
new Appointment {
Caption = "Website Redesign Plan",
StartDate = date + (new TimeSpan(1, 9, 30, 0)),
EndDate = date + (new TimeSpan(1, 12, 0, 0)),
Label = 1,
Status = 1,
Accepted = true
},
new Appointment {
Caption = "New Brochures",
StartDate = date + (new TimeSpan(1, 13, 30, 0)),
EndDate = date + (new TimeSpan(1, 15, 15, 0)),
Label = 8,
Status = 2,
Accepted = true
},
new Appointment {
Caption = "Book Flights to San Fran for Sales Trip",
StartDate = date + (new TimeSpan(1, 12, 0, 0)),
EndDate = date + (new TimeSpan(1, 13, 0, 0)),
AllDay = true,
Label = 8,
Status = 1
},
new Appointment {
Caption = "Approve Personal Computer Upgrade Plan",
StartDate = date + (new TimeSpan(2, 10, 0, 0)),
EndDate = date + (new TimeSpan(2, 13, 0, 0)),
Label = 8,
Status = 2
},
new Appointment {
Caption = "Final Budget Review",
StartDate = date + (new TimeSpan(2, 14, 0, 0)),
EndDate = date + (new TimeSpan(2, 16, 30, 0)),
Label = 1,
Status = 1
},
new Appointment {
Caption = "Install New Database",
StartDate = date + (new TimeSpan(3, 9, 45, 0)),
EndDate = date + (new TimeSpan(3, 11, 45, 0)),
Label = 6,
Status = 4,
Accepted = true
},
new Appointment {
Caption = "Approve New Online Marketing Strategy",
StartDate = date + (new TimeSpan(3, 12, 30, 0)),
EndDate = date + (new TimeSpan(3, 15, 30, 0)),
Label = 1,
Status = 1,
Accepted = true
},
new Appointment {
Caption = "Customer Workshop",
StartDate = date + (new TimeSpan(4, 11, 0, 0)),
EndDate = date + (new TimeSpan(4, 12, 0, 0)),
AllDay = true,
Label = 8,
Status = 1
},
new Appointment {
Caption = "Prepare 2021 Marketing Plan",
StartDate = date + (new TimeSpan(4, 10, 30, 0)),
EndDate = date + (new TimeSpan(4, 13, 0, 0)),
Label = 1,
Status = 1,
Accepted = true
},
new Appointment {
Caption = "Brochure Design Review",
StartDate = date + (new TimeSpan(4, 14, 0, 0)),
EndDate = date + (new TimeSpan(4, 16, 30, 0)),
Label = 1,
Status = 2,
Accepted = true
},
new Appointment {
Caption = "Create Icons for Website",
StartDate = date + (new TimeSpan(5, 10, 0, 0)),
EndDate = date + (new TimeSpan(5, 12, 30, 0)),
Label = 1,
Status = 1
},
new Appointment {
Caption = "Launch New Website",
StartDate = date + (new TimeSpan(5, 13, 20, 0)),
EndDate = date + (new TimeSpan(5, 16, 0, 0)),
Label = 8,
Status = 1
},
new Appointment {
Caption = "Upgrade Server Hardware",
StartDate = date + (new TimeSpan(6, 11, 0, 0)),
EndDate = date + (new TimeSpan(6, 13, 30, 0)),
Label = 8,
Status = 1
}
};
return dataSource;
}
}
Run Demo: Scheduler - Date Header Template
Object SchedulerDateHeaderCellInfo
See Also