DxSchedulerMonthView.DateHeaderCellTemplate Property

Specifies the template for date header cells in the Scheduler.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<SchedulerDateHeaderCellInfo> DateHeaderCellTemplate { get; set; }

Property Value

Type	Description
RenderFragment<SchedulerDateHeaderCellInfo>	The date header cell template.

Remarks

This template accepts a SchedulerTimelineHeaderCellInfo object as the context parameter. You can use the parameter’s Interval property to get the interval to which the cell belongs.

The following code snippet highlights weekends with color:

Razor

<DxScheduler @bind-StartDate="@StartDate" DataStorage="@DataStorage" CssClass="demo-sc-size">
    <Views>
        <DxSchedulerMonthView CellMinWidth="50">
            <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>
        </DxSchedulerMonthView>
    </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";
    }
}

Styles

.scheduler-weekday {
    color: grey;
}

.scheduler-weekend {
    color: darkred;
}

.scheduler-date {
    padding-right: 3px;
    font-size: 20px;
    font-weight: 600;
}

Model

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

Data

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