Timeline View in UWP Scheduler (SfSchedule)

22 Jul 202624 minutes to read

TimeLine view is used to display the complete TimeLine in the selected day; the default visible day of the Schedule will be the current day. Appointments are added in particular timeslots based on their timeline.

Timeline View UWP Scheduler

View Header Appearance

You can customize the default appearance of schedule timeline view header using TimeLineViewHeaderStyle property of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule x:Name="schedule" ScheduleType="TimeLine">
            <schedule:SfSchedule.TimeLineViewHeaderStyle>
                <schedule:ScheduleTimeLineViewHeaderStyle
                    TimeLineViewCurrentDateBackground="Yellow"
                    TimeLineViewCurrentDateForeground="Blue"
                    TimeLineViewHeaderBackground="LightGray"
                    TimeLineViewHeaderFontFamily="Calibri "
                    TimeLineViewHeaderFontWeight="Bold"
                    TimeLineViewHeaderHeight="50"
                    TimeLineViewHeaderTextColor="Black"
                    TimeLineViewHeaderTextFontStyle="Normal"
                    TimeLineViewHeaderTextHorizontalAlignment="Stretch"
                    TimeLineViewHeaderTextSize="14"
                    TimeLineViewHeaderTextVerticalAlignment="Center" />
            </schedule:SfSchedule.TimeLineViewHeaderStyle>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

              schedule.ScheduleType = ScheduleType.TimeLine;
            schedule.TimeLineViewHeaderStyle = new ScheduleTimeLineViewHeaderStyle()
            {
                TimeLineViewCurrentDateBackground = new SolidColorBrush(Colors.Yellow),
                TimeLineViewCurrentDateForeground = new SolidColorBrush(Colors.Blue),
                TimeLineViewHeaderBackground = new SolidColorBrush(Colors.LightGray),
                TimeLineViewHeaderFontFamily = new FontFamily("Calibri"),
                TimeLineViewHeaderFontWeight = FontWeights.Bold,
                TimeLineViewHeaderHeight = 50,
                TimeLineViewHeaderTextColor = new SolidColorBrush(Colors.Black),
                TimeLineViewHeaderTextFontStyle = Windows.UI.Text.FontStyle.Normal,
                TimeLineViewHeaderTextHorizontalAlignment = HorizontalAlignment.Center,
                TimeLineViewHeaderTextSize = 14,
                TimeLineViewHeaderTextVerticalAlignment = VerticalAlignment.Center
            };

View Header Appearance

Change Time Interval

You can customize the time intervals of timeslots in timeline by using TimeInterval property of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

         <schedule:SfSchedule
            x:Name="schedule"
            TimeInterval="FifteenMin"
            ScheduleType="TimeLine" />

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.TimeLine;
            schedule.TimeInterval= TimeInterval.FifteenMin;

TimeInterval UWP TimeLineView

You can also set a custom time interval for timeslots by using the CustomTimeInterval property of SfSchedule by setting TimeInterval to Custom.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule
            x:Name="schedule"
            TimeInterval="Custom"
            CustomTimeInterval="120"
            ScheduleType="TimeLine" />

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.TimeInterval= TimeInterval.Custom;
            schedule.CustomTimeInterval = 120;

Custom TimeInterval UWP TimeLineView

Change Working Hours

Working hours in the TimeLine of Schedule control will be differentiated from non-working hours by a separate color. By default, working hours will be between 09 to 18. You can customize the working hours by setting the WorkStartHour and WorkEndHour properties of SfSchedule.
Non-working hours can be disabled by setting ShowNonWorkingHours to false and non-working hours color can be changed by using NonWorkingHourBrush property of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule
            x:Name="schedule"
            IsHighLightWorkingHours="True"
            NonWorkingHourBrush="Blue"
            ScheduleType="TimeLine"
            ShowNonWorkingHours="True"
            WorkEndHour="20"
            WorkStartHour="8" />

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.WorkStartHour = 8;
            schedule.WorkEndHour = 20;
            schedule.IsHighLightWorkingHours = true;
            schedule.NonWorkingHourBrush = new SolidColorBrush(Colors.Blue);
            schedule.ShowNonWorkingHours = true;

Change in Working Hours

Collapse hours

You can collapse the hours in TimeLineView and DayView by adding hours in the CollapsedHour collection using the CollapsedHours property.

using Syncfusion.UI.Xaml.Schedule;

schedule.CollapsedHours.Add(new ScheduleCollapsedHour() 
    { 
        StartHour = 02, 
        EndHour = 06, 
    });

CollapsedHours UWP TimeLineView

Timeslot Appearance

You can customize the default timeslot appearance in timeline view by changing its stroke dash array using the MajorTickStrokeDashArray and MinorTickStrokeDashArray properties of SfSchedule. Also, you can change the color by using the MajorTickStroke and MinorTickStroke properties of the SfSchedule control.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

         <schedule:SfSchedule
            x:Name="schedule"
            MajorTickStroke="Blue"
            MinorTickStroke="Blue"
            MajorTickStrokeDashArray="10"
            MinorTickStrokeDashArray="10"
            ScheduleType="TimeLine" />

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.MajorTickStroke = new SolidColorBrush(Colors.Blue);
            schedule.MinorTickStroke = new SolidColorBrush(Colors.Blue);
            schedule.MajorTickStrokeDashArray = new DoubleCollection() {10};
            schedule.MinorTickStrokeDashArray = new DoubleCollection() {10};

Custom_TimeSlot in TimeLine View

Non-Accessible timeslots.

You can restrict/allocate certain timeslots as Non-accessible blocks using the NonAccessibleBlocks property of SfSchedule, so that you can allocate those timeslots for predefined events/activities like Lunch hour.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule ScheduleType="TimeLine">
            <schedule:SfSchedule.NonAccessibleBlocks>
                <schedule:NonAccessibleBlock
                    Background="LightPink"
                    EndHour="8.00"
                    Label="Non Accessible Block"
                    StartHour="6.00" />
            </schedule:SfSchedule.NonAccessibleBlocks>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.TimeLine;
            schedule.NonAccessibleBlocks.Add(new NonAccessibleBlock()
            {
                Background = new SolidColorBrush(Colors.LightPink),
                StartHour = 6.00,
                EndHour = 8.00,
                Label = "Non Accessible Block"
            });

NonAccessibleBlocks in TimeLine View

Time Label Formatting

You can customize the default label format of time in timeline view by using MajorTickTimeFormat and MinorTickTimeFormat properties of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

       <schedule:SfSchedule
            x:Name="schedule"
            MajorTickTimeFormat="HH"
            MinorTickTimeFormat="HH mm"
            ScheduleType="TimeLine" />

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.TimeLine;
            schedule.MajorTickTimeFormat = "HH";
            schedule.MinorTickTimeFormat = "HH mm";

MajorTickTimeFormat

Time Label appearance

You can customize the default color of the time label in timeline view by using the MajorTickLabelStroke and MinorTickLabelStroke properties of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule
            x:Name="schedule"
            MajorTickLabelStroke="Blue"
            MinorTickLabelStroke="Blue"
            ScheduleType="TimeLine" />

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.MajorTickLabelStroke=new SolidColorBrush(Colors.Blue);
            schedule.MinorTickLabelStroke = new SolidColorBrush(Colors.Blue);

You can customize the default font size of the time label in timeline view by using the MajorTickLabelSize and MinorTickLabelSize properties of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule
            x:Name="schedule"
            MajorTickLabelSize="20"
            MinorTickLabelSize="20"
            ScheduleType="TimeLine" />

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.MajorTickLabelSize=20;
            schedule.MinorTickLabelSize =20;

MajorTickLabelSize

Selection

You can customize the default appearance of the selection UI in the timeslots.

  • Selection customization using style
  • Selection customization using custom View.

Selection customization using style

You can customize the timeslot selection by using the ScheduleSelectionStyle property of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule ScheduleType="TimeLine">
            <schedule:SfSchedule.ScheduleSelectionStyle>
                <schedule:ScheduleSelectionStyle
                    Background="Blue"
                    BorderBrush="Black"
                    BorderCornerRadius="5"
                    BorderThickness="5" />
            </schedule:SfSchedule.ScheduleSelectionStyle>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

        schedule.ScheduleSelectionStyle= new ScheduleSelectionStyle()
            {
                 Background = new SolidColorBrush(Colors.Blue),
                 BorderBrush = new SolidColorBrush(Colors.Black),
                 BorderCornerRadius = new CornerRadius(5),
                 BorderThickness = new Thickness(5)
            };

Schedule SelectionStyle

Selection customization using custom View.

You can replace the default selection UI with your custom view by setting SelectionView property of SfSchedule.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

         <schedule:SfSchedule x:Name="schedule" ScheduleType="TimeLine">
            <schedule:SfSchedule.SelectionView>
                <Button Background="BlueViolet" Content="+NewEvent" />
            </schedule:SfSchedule.SelectionView>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

       schedule.SelectionView=new Button()
            {
                Content = "+NewEvent",
                Background = new SolidColorBrush(Colors.BlueViolet)
            };

Selection customization

Configuration Resources

The Schedule control allows you to define resources that can be assigned to appointments. Resources let you associate additional information with your appointments. The schedule can group appointments based on the resources associated with them.

Adding resource

Resource can be added to the schedule control by setting the Resource and ScheduleResourceTypeCollection of SfSchedule. After that, add the ResourceType for ScheduleResourceTypeCollection and assign Resource to ResourceType.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule
            x:Name="schedule"
            Resource="Doctors"
            ScheduleType="TimeLine">
            <schedule:SfSchedule.ScheduleResourceTypeCollection>
                <schedule:ResourceType TypeName="Doctors">
                    <schedule:Resource
                        DisplayName="Dr.Jacob"
                        ResourceName="Dr.Jacob"
                        TypeName="Doctors" />
                    <schedule:Resource
                        DisplayName="Dr.Darsy"
                        ResourceName="Dr.Darsy"
                        TypeName="Doctors" />
                </schedule:ResourceType>
            </schedule:SfSchedule.ScheduleResourceTypeCollection>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

           var currentDate=DateTime.Now;
            ScheduleAppointment app = new ScheduleAppointment()
            {
                StartTime = currentDate.Date.AddHours(5),
                EndTime = currentDate.Date.AddHours(6),
                Subject = "Meeting",
                Location = "Chennai",
                AppointmentBackground =new SolidColorBrush(Colors.Red)
            };
            app.ResourceCollection.Add(new Resource()
            {
                ResourceName = "Dr.Jacob",
                TypeName = "Doctors"
            });

            ScheduleAppointment app1 = new ScheduleAppointment()
            {
                StartTime = currentDate.Date.AddHours(7),
                EndTime = currentDate.Date.AddHours(8),
                Subject = "Conference",
                Location = "Chennai",
                AppointmentBackground = new SolidColorBrush(Colors.Yellow)
            };
            app1.ResourceCollection.Add(new Resource()
            {
                ResourceName = "Dr.Darsy",
                TypeName = "Doctors"
            });


            schedule.Appointments.Add(app);
            schedule.Appointments.Add(app1);

Resources in TimeLine View

Customizing resource visibility

This feature supports displaying ‘N’ number of rows in TimeLine view. You can achieve this by specifying the count of resources that need to be displayed per view. This support is offered for TimeLine view alone.
This support can be enabled by using the property TimeLineViewRowCount in SfSchedule. By default, its value is “zero”.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

         <schedule:SfSchedule
            x:Name="schedule" TimeLineViewRowCount="1"
            Resource="Doctors"
            ScheduleType="TimeLine">
            <schedule:SfSchedule.ScheduleResourceTypeCollection>
                <schedule:ResourceType TypeName="Doctors">
                    <schedule:Resource
                        DisplayName="Dr.Jacob"
                        ResourceName="Dr.Jacob"
                        TypeName="Doctors" />
                    <schedule:Resource
                        DisplayName="Dr.Darsy"
                        ResourceName="Dr.Darsy"
                        TypeName="Doctors" />
                </schedule:ResourceType>
            </schedule:SfSchedule.ScheduleResourceTypeCollection>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

            schedule.TimeLineViewRowCount = 1;
            var currentDate=DateTime.Now;
            ScheduleAppointment app = new ScheduleAppointment()
            {
                StartTime = currentDate.Date.AddHours(5),
                EndTime = currentDate.Date.AddHours(6),
                Subject = "Meeting",
                Location = "Chennai",
                AppointmentBackground =new SolidColorBrush(Colors.Red)
            };
            app.ResourceCollection.Add(new Resource()
            {
                ResourceName = "Dr.Jacob",
                TypeName = "Doctors"
            });

            ScheduleAppointment app1 = new ScheduleAppointment()
            {
                StartTime = currentDate.Date.AddHours(7),
                EndTime = currentDate.Date.AddHours(8),
                Subject = "Conference",
                Location = "Chennai",
                AppointmentBackground = new SolidColorBrush(Colors.Yellow)
            };
            app1.ResourceCollection.Add(new Resource()
            {
                ResourceName = "Dr.Darsy",
                TypeName = "Doctors"
            });
            schedule.Appointments.Add(app);
            schedule.Appointments.Add(app1);

Resource Customization