DxSchedulerTimelineView.TimeCellTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[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 the number of appointments in time cells that correspond to work days:

Index.razor

@using Data

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             ActiveViewType="SchedulerViewType.Timeline">
    <Views>
        <DxSchedulerTimelineView Duration="TimeSpan.FromDays(7)">
            <Scales>
                <DxSchedulerTimeScale Unit="SchedulerTimeScaleUnit.Day"></DxSchedulerTimeScale>
            </Scales>
            <TimeCellTemplate>
                @{
                    if (!IsWeekend(context.Interval.Start)) {
                        <div style="height: 100%; display: flex; align-items: flex-end; background-color:lavender">
                            <b>Count: @DataStorage.GetAppointments(context.Interval).ToList().Count</b>
                        </div>
                    }
                 }
            </TimeCellTemplate>
        </DxSchedulerTimelineView>
    </Views>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = RecurringAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence"
        }
    };

    bool IsWeekend(DateTime date) {
        return date.DayOfWeek == DayOfWeek.Saturday || date.DayOfWeek == DayOfWeek.Sunday;
    }
}

RecurringAppointment.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Scheduler.Data {
    public class RecurringAppointment {
        public RecurringAppointment() { }
        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 Status { get; set; }
        public int Label { get; set; }
        public bool AllDay { get; set; }
        public string Recurrence { get; set; }
    }
}

RecurringAppointmentCollection.cs

using System;
using System.Collections.Generic;
using System.Globalization;

namespace Scheduler.Data {
    public static partial class RecurringAppointmentCollection {
        public static List<RecurringAppointment> GetAppointments() {
            DateTime date = DateTimeUtils.GetBeginOfMonth(DateTime.Now);
            date = DateTimeUtils.GetWeekStart(date);
            return new List<RecurringAppointment>() {
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Watercolor Landscape",
                Label = 5,
                StartDate = date + (new TimeSpan(2, 9, 30, 0)),
                EndDate = date + (new TimeSpan(2, 11, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"36\" Id=\"04dcc127-df56-49d7-baff-ce4b6264addd\" OccurrenceCount=\"10\" Range=\"1\" Type=\"1\" />", ToString(date + (new TimeSpan(2, 9, 30, 0))), ToString(date + (new TimeSpan(2, 11, 0, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Oil Painting for Beginners",
                Label = 2,
                StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                EndDate = date + (new TimeSpan(1, 11, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"18\" Id=\"72e3db8f-cdb6-4aaa-afe1-e3c6b80ce99e\" OccurrenceCount=\"10\" Range=\"1\" Type=\"1\" />", ToString(date + (new TimeSpan(1, 9, 30, 0))), ToString(date + (new TimeSpan(1, 11, 0, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Testing",
                Label = 8,
                StartDate = date + (new TimeSpan(1, 12, 0, 0)),
                EndDate = date + (new TimeSpan(1, 13, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"2\" Id=\"15129fd3-9eb0-4861-8c43-c61844137f17\" OccurrenceCount=\"2\" Frequency=\"2\" Range=\"1\" Type=\"1\" />", ToString(date + (new TimeSpan(1, 12, 0, 0))), ToString(date + (new TimeSpan(1, 13, 0, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Meeting of Instructors",
                Label = 1,
                StartDate = date + (new TimeSpan(1, 9, 0, 0)),
                EndDate = date + (new TimeSpan(1, 9, 15, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"62\" Id=\"6de79b21-6b16-4dea-9736-c500058ec858\" OccurrenceCount=\"25\" Range=\"1\" />", ToString(date + (new TimeSpan(1, 9, 0, 0))), ToString(date + (new TimeSpan(1, 9, 15, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Monthly Planning",
                Label = 1,
                StartDate = date + (new TimeSpan(3, 14, 30, 0)),
                EndDate = date + (new TimeSpan(3, 15, 45, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" DayNumber=\"24\" WeekOfMonth=\"0\" Id=\"cd9da802-d166-47d1-a8df-1101fcc50d53\" OccurrenceCount=\"2\" Range=\"1\" Type=\"2\" />", ToString(date + (new TimeSpan(3, 14, 30, 0))), ToString(date + (new TimeSpan(3, 15, 45, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Annual Open Day",
                Label = 6,
                StartDate = date + (new TimeSpan(27, 9, 30, 0)),
                EndDate = date + (new TimeSpan(27, 13, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" Month=\"{1}\" DayNumber=\"{2}\" WeekOfMonth=\"0\" Id=\"bd5dc726-0fa6-4965-99e0-bf69063218e6\" Type=\"3\" />", ToString(date + (new TimeSpan(27, 9, 30, 0))), (date + (new TimeSpan(27, 9, 30, 0))).Month, (date + (new TimeSpan(27, 9, 30, 0))).Day)
            }
        };
        }

        private static string ToString(DateTime dateTime) {
            return dateTime.ToString(CultureInfo.InvariantCulture);
        }

        public static class DateTimeUtils {
            public static DateTime GetWeekStart(DateTime date) {
                return date.DayOfWeek == DayOfWeek.Sunday ? ValidWeekStart(date.Date) : ValidWeekStart(date.Date - CreateWeekOffset(date, DayOfWeek.Sunday));
            }
            public static DateTime GetBeginOfMonth(DateTime date) {
                return new DateTime(date.Year, date.Month, 1);
            }

            static DateTime ValidWeekStart(DateTime date) {
                TimeSpan weekSpan = new TimeSpan(7, 0, 0, 0);
                DateTime baseDate = date.Date;

                if(DateTime.MaxValue - date < weekSpan)
                    return baseDate - weekSpan;
                return baseDate;
            }
            static TimeSpan CreateWeekOffset(DateTime date, DayOfWeek firstDayOfWeek) {
                int offset = (date.DayOfWeek + 7 - firstDayOfWeek) % 7;
                TimeSpan result = TimeSpan.FromDays(offset);
                if(date.Ticks < result.Ticks)
                    result = TimeSpan.FromDays(offset - 7);
                return result;
            }

        }
    }
}