DxSchedulerDayViewBase.TimeCellTemplate Property

Specifies a template used to display time cells in the Scheduler.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public RenderFragment<SchedulerTimeCellInfo> TimeCellTemplate { get; set; }

Property Value

Type	Description
RenderFragment<SchedulerTimeCellInfo>

The time cell template.

Remarks

The TimeCellTemplate allows you to customize the content and appearance of time cells in the Scheduler.

This template accepts a SchedulerTimeCellInfo object as the context parameter. You can use the parameter’s Interval property to get the interval to which the time cell belongs. The parameter’s Resource property specifies the resource associated with the time cell or contains an empty resource item if no resource is assigned.

The following example displays placeholder text for time cells that do not contain appointments:

Razor
Appointment
AppointmentCollection
CSS

razor

@using Data

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerDayView ShowWorkTimeOnly="true">
        <TimeCellTemplate>
            @{
                var appointments = DataStorage.GetAppointments(context.Interval).ToList();
                if (appointments.Count == 0) {
                    <div class="planned">
                        Nothing planned</div>
                }
            }
        </TimeCellTemplate>
    </DxSchedulerDayView>
</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"
        }
    };
}

csharp

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

csharp

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, 0, 0)),
                Label = 6, 
                Status = 1
            },
            new Appointment {
                Caption = "Upgrade Personal Computers",
                StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                EndDate = date + (new TimeSpan(0, 16, 30, 0)),
                Label = 1, 
                Status = 1
            },
            new Appointment {
                Caption = "Website Redesign Plan",
                StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                Label = 1, 
                Status = 1
            },
            // ...
        };
        return dataSource;
    }
}

css

.planned {
    height: 100%; 
    display: flex; 
    justify-content: center;
}