SchedulerDateHeaderCellInfo Class

Stores information about a Scheduler’s header cell that displays a date.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class SchedulerDateHeaderCellInfo

Remarks

A SchedulerDateHeaderCellInfo object is passed as the context parameter to the following templates:

• DxSchedulerDayViewBase.DateHeaderCellTemplate
• DxSchedulerMonthView.DateHeaderCellTemplate

The parameter’s properties allow you to specify the following:

• The interval to which the cell belongs (Interval).
• Resources associated with the cell (Resources).

The following example adds weather indicator images to date header cells:

Index.razor

    @inject WeatherForecastService ForecastService

    <DxScheduler @bind-StartDate="@StartDate" DataStorage="@DataStorage" CssClass="demo-sc-size">
        <Views>
            <DxSchedulerDayView DayCount="5" ShowWorkTimeOnly="true">
                <DateHeaderCellTemplate>
                    <div style="display: flex;">
                        <div class="dxbl-sc-date-hr-wrapper" style="width: 100%;">
                            <span class="dxbl-sc-date-hr-day">@context.Interval.Start.Day</span>
                            <span class="dxbl-sc-date-hr-week">@context.Interval.Start.ToString("ddd")</span>
                        </div>
                        @{
                            string cloudCover = GetCloudCoverByDate(context.Interval.Start);
                            if(!string.IsNullOrEmpty(cloudCover)) {
                                <span class="@string.Format("scheduler-cloud-cover-icon {0}", cloudCover)"></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 GetCloudCoverByDate(DateTime date) {
        foreach(WeatherForecast item in ForecastService.GetForecast())
            if(date.Day == item.Date.Day)
                return GetCloudCoverCssClass(item.CloudCover);
        return string.Empty;
    }
    string GetCloudCoverCssClass(string cloudCover) {
        switch(cloudCover) {
            case "Storm":
                return "scheduler-icon-storm";
            case "Cloudy":
                return "scheduler-icon-cloudy";
            case "Partly cloudy":
                return "scheduler-icon-partly-cloudy";
            case "Sunny":
                return "scheduler-icon-sunny";
            default:
                return string.Empty;
        }
    }
}

Appointment.cs

using System;

namespace BlazorDemo.Data {
    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; }
    }
}

AppointmentCollection.cs

using System;
using System.Collections.Generic;

namespace BlazorDemo.Data {

    public static partial class AppointmentCollection {
        public static List<Appointment> GetAppointments() {
            DateTime date = DateTimeUtils.GetWeekStart(DateTime.Now);
            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

Inheritance

Object

SchedulerDateHeaderCellInfo