Skip to main content

DxSchedulerDayViewBase.DateHeaderCellTemplate Property

Specifies the template for date header cells in the Scheduler.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v22.2.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 example adds weather indicator images to date header cells:

    @inject WeatherForecastService ForecastService

    <DxScheduler StartDate="@DateTime.Today" DataStorage="@DataStorage" CssClass="w-100">
        <Views>
            <DxSchedulerDayView DayCount="5" ShowWorkTimeOnly="true">
                <DateHeaderCellTemplate>
                    <div style="display: flex;">
                        <div class="dxbs-sc-date-hr-wrapper" style="width: 100%;">
                            <span class="dxbs-sc-date-hr-day">@context.Interval.Start.Day</span>
                            <span class="dxbs-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 {
    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;
        }
    }
}

Scheduler - Date Header Template

Run Demo: Scheduler - Date Header Template

See Also