Day View in UWP Scheduler (SfSchedule)

22 Jul 202624 minutes to read

DayView is used to display a single day; the current day will be visible by default. Appointments on a specific day will be arranged in respective timeslots based on their duration.

ViewHeader Appearance

You can customize the default appearance of view header in DayView by using DayViewHeaderStyle and DayViewHeaderHeight properties of SfSchedule.

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

    <Schedule:SfSchedule x:Name="schedule" ScheduleType="Day">
            <Schedule:SfSchedule.DayViewHeaderStyle>
                <Schedule:ScheduleDayViewHeaderStyle
                    DayViewHeaderBackground="Red"
                    DayViewHeaderFontFamily="Arial"
                    DayViewHeaderHeight="50"
                    DayViewHeaderTextColor="White"
                    DayViewHeaderTextSize="15" />
            </Schedule:SfSchedule.DayViewHeaderStyle>
        </Schedule:SfSchedule>

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

    SfSchedule schedule = new SfSchedule();
            schedule.ScheduleType = ScheduleType.Day;
            ScheduleDayViewHeaderStyle dayViewHeaderStyle = new ScheduleDayViewHeaderStyle();
            dayViewHeaderStyle.DayViewHeaderTextColor = new SolidColorBrush(Colors.White);
            dayViewHeaderStyle.DayViewHeaderFontFamily = new FontFamily("Arial");
            dayViewHeaderStyle.DayViewHeaderHeight = 50;
            dayViewHeaderStyle.DayViewHeaderTextSize = 15;
            dayViewHeaderStyle.DayViewHeaderBackground = new SolidColorBrush(Colors.Red);
            schedule.DayViewHeaderStyle = dayViewHeaderStyle;

ViewHeader Appearance in UWP Schedule

Change Time Interval

You can customize the interval of timeslots in DayView.

TimeInterval customization

You can customize the interval of timeslots in DayView by setting TimeInterval property of SfSchedule.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.TimeInterval = TimeInterval.ThirtyMin;
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

     <Schedule:SfSchedule x:Name="schedule" TimeInterval="ThirtyMin" />

</Page>

TimeInterval Changing in UWP Schedule

CustomTimeInterval

You can customize the interval of timeslots in DayView by setting CustomTimeInterval property of SfSchedule.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.TimeInterval = TimeInterval.Custom;
            schedule.CustomTimeInterval = 120;
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

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

</Page>

TimeInterval Customization in UWP Schedule

Change Working hours

Working hours in DayView of Schedule control will be differentiated with non-working hours by separate color. By default, working hours will be between 09 to 18. You can customize the working hours by setting WorkStartHour and WorkEndHour properties of SfSchedule.

using Syncfusion.UI.Xaml.Schedule;

           schedule.IsHighLightWorkingHours = true;
            schedule.ScheduleType = ScheduleType.Day;
            schedule.WorkStartHour = 10;
            schedule.WorkEndHour = 18;
            schedule.NonWorkingHourBrush = new SolidColorBrush(Colors.LightGray);
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

    <Schedule:SfSchedule
            x:Name="schedule"
            IsHighLightWorkingHours="True"
            NonWorkingHourBrush="LightGray"
            ScheduleType="Day"
            WorkEndHour="18"
            WorkStartHour="10" />

</Page>

Changing Working hours in UWP Schedule

Note:
WorkStartHour and WorkEndHour should be in integer value to represent hours.

Timeslot Appearance

You can customize the appearance of the Timeslot by its color using MajorTickStroke, MinorTickStroke, DayViewVerticalLineStroke, MajorTickStrokeDashArray, MinorTickStrokeDashArray, IsHighLightWorkingHours, WorkStartHour , WorkEndHour and NonWorkingHourBrush properties of SfSchedule.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.MajorTickStroke = new SolidColorBrush(Colors.Red);
            schedule.MinorTickStroke = new SolidColorBrush(Colors.Green);
            schedule.DayViewVerticalLineStroke = new SolidColorBrush(Colors.Blue);
            schedule.MajorTickStrokeDashArray = new DoubleCollection() { 5, 10 };
            schedule.MinorTickStrokeDashArray = new DoubleCollection() { 10, 10 };
            schedule.IsHighLightWorkingHours = true;
            schedule.WorkStartHour = 9;
            schedule.WorkEndHour = 18;
            schedule.NonWorkingHourBrush = new SolidColorBrush(Colors.LightBlue);
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

    <Schedule:SfSchedule
            x:Name="schedule"
            DayViewVerticalLineStroke="Blue"
            IsHighLightWorkingHours="True"
            MajorTickStroke="Red"
            MajorTickStrokeDashArray="5,10"
            MinorTickStroke="Green"
            MinorTickStrokeDashArray="5,5"
            NonWorkingHourBrush="LightBlue"
            WorkEndHour="18"
            WorkStartHour="9" />

</Page>

Timeslot Appearance Customization in UWP Schedule

Non-Accessible timeslots

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

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.NonAccessibleBlocks.Add(new NonAccessibleBlock()
            {
                Background = new SolidColorBrush(Colors.LightPink),
                StartHour = 6.00,
                EndHour = 8.00,
                Label = "Non Accessible Block"
            });
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

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

</Page>

Non-Accessible Timeslots in UWP Schedule

Note:
Selection and related events will not work in these blocks.

Change first day of week:

The Scheduler supports changing the first day of the week by using the FirstDayOfWeek property, and it is not applicable for DayView as it displays only one day.

Time Label Formatting

You can customize the format for the labels which are mentioning the time, by setting MajorTickTimeFormat and MinorTickTimeFormat properties of ` SfSchedule`.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.MajorTickTimeFormat = "hh:mm tt";
            schedule.MinorTickTimeFormat = "mm";
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

    <Schedule:SfSchedule
            x:Name="schedule"
            MajorTickTimeFormat="hh:mm tt"
            MinorTickTimeFormat="mm"
            ScheduleType="Day" />

</Page>

Time label format Customization in UWP Schedule

Time Label Appearance

You can customize the color for the labels which are mentioning the time, by setting MajorTickLabelStroke and MinorTickLabelStroke properties of ` SfSchedule`.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.MajorTickLabelStroke = new SolidColorBrush(Colors.Blue);
            schedule.MinorTickLabelStroke = new SolidColorBrush(Colors.Blue);
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

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

</Page>

TimeLabel Appearance in UWP Schedule

Selection

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

Selection customization using style

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

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            ScheduleSelectionStyle selectionStyle = new ScheduleSelectionStyle();
            selectionStyle.Background = new SolidColorBrush(Colors.Blue);
            selectionStyle.BorderBrush = new SolidColorBrush(Colors.Black);
            selectionStyle.BorderThickness = new Thickness(5);
            selectionStyle.BorderCornerRadius = new CornerRadius(5);
            schedule.ScheduleSelectionStyle = selectionStyle;
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

    <Schedule:SfSchedule x:Name="schedule" ScheduleType="Day">
            <Schedule:SfSchedule.ScheduleSelectionStyle>
                <Schedule:ScheduleSelectionStyle
                    Background="Blue"
                    BorderBrush="Black"
                    BorderCornerRadius="5"
                    BorderThickness="5" />
            </Schedule:SfSchedule.ScheduleSelectionStyle>
        </Schedule:SfSchedule>

</Page>

Selection Customization using Style in UWP Schedule

Selection customization using custom View

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

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            Button selectionView = new Button();
            selectionView.Content = "+NewEvent";
            selectionView.Background = new SolidColorBrush(Colors.BlueViolet);
            schedule.SelectionView = selectionView;
<Page
    ...
    xmlns:Schedule="using:Syncfusion.UI.Xaml.Schedule">

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

</Page>

Selection customization using custom View in UWP Schedule

Note:
Selection customization is applicable for time slots alone.

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.

using Syncfusion.UI.Xaml.Schedule;

     //setting resource for schedule
            schedule.Resource = "Doctor";
            //Creating Appointment style 
            ResourceType resourceType = new ResourceType { TypeName = "Doctor" };
            resourceType.ResourceCollection.Add(new Resource { DisplayName = "Dr.Jacob", ResourceName = "Dr.Jacob", });
            resourceType.ResourceCollection.Add(new Resource { DisplayName = "Dr.Darsy", ResourceName = "Dr.Darsy" });
            schedule.DayHeaderOrder = DayHeaderOrder.OrderByDate;
            //setting resource type
            schedule.ScheduleResourceTypeCollection = new ObservableCollection<ResourceType> { resourceType };
<Page
    ...
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Schedule">

    <syncfusion:SfSchedule Name="schedule" Resource="Doctors">
            <syncfusion:SfSchedule.ScheduleResourceTypeCollection>
                <syncfusion:ResourceType TypeName="Doctors">
                    <syncfusion:Resource
                        DisplayName="Dr.Jacob John, M.D "
                        ResourceName="Dr.Jacob" />
                    <syncfusion:Resource
                        DisplayName="Dr.Darsy Mascio, M.D"
                        ResourceName="Dr.Darsy" />
                </syncfusion:ResourceType>
            </syncfusion:SfSchedule.ScheduleResourceTypeCollection>
        </syncfusion:SfSchedule>

</Page>

Adding Resources in Scheduler UWP Schedule

Sub Resource

SubResourceType enables users to view appointments based on their subcategory only in day, week views and can group appointments under various subcategories.

using Syncfusion.UI.Xaml.Schedule;

            SfSchedule schedule = new SfSchedule();
            schedule.ScheduleType = ScheduleType.Day;
            ResourceType resourceType = new ResourceType
            {
                TypeName = "Hospital"
            };
            ResourceType subResourceType = new ResourceType
            {
                TypeName = "Department"
            };
            resourceType.ResourceCollection.Add(new Resource
            {
                DisplayName = "MIOT Hospital",
                ResourceName = "MIOTHospital",
            });
            resourceType.ResourceCollection.Add(new Resource
            {
                DisplayName = "Vijaya  Hospital",
                ResourceName = "VijayaHospital"
            });
            subResourceType.ResourceCollection.Add(new Resource
            {
                DisplayName = "Eye Department",
                ResourceName = "Eye"
            });
            subResourceType.ResourceCollection.Add(new Resource
            {
                DisplayName = "Heart Department",
                ResourceName = "Heart"
            });
            schedule.ScheduleResourceTypeCollection = new ObservableCollection<ResourceType> { resourceType };
            schedule.ScheduleResourceTypeCollection = new ObservableCollection<ResourceType> { subResourceType };
            schedule.Resource = "Hospital";
            schedule.Resource = "Department";
<Page
    ...
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Schedule">

    <syncfusion:SfSchedule
            x:Name="schedule"
            Resource="Hospital"
            ScheduleType="Day">
            <syncfusion:SfSchedule.ScheduleResourceTypeCollection>
                <syncfusion:ResourceType TypeName="Hospital">
                    <syncfusion:ResourceType.ResourceCollection>
                        <syncfusion:Resource DisplayName="MIOT Hospital" ResourceName="MIOTHospital" />
                        <syncfusion:Resource DisplayName="Vijaya  Hospital" ResourceName="VijayaHospital" />
                    </syncfusion:ResourceType.ResourceCollection>
                    <syncfusion:ResourceType.SubResourceType>
                        <syncfusion:ResourceType TypeName="Department">
                            <syncfusion:ResourceType.ResourceCollection>
                                <syncfusion:Resource DisplayName="Eye Department" ResourceName="Eye" />
                                <syncfusion:Resource DisplayName="Heart Department" ResourceName="Heart" />
                            </syncfusion:ResourceType.ResourceCollection>
                        </syncfusion:ResourceType>
                    </syncfusion:ResourceType.SubResourceType>
                </syncfusion:ResourceType>
            </syncfusion:SfSchedule.ScheduleResourceTypeCollection>
        </syncfusion:SfSchedule>

</Page>

SubResources Type in UWP Schedule

Changing resource order

Order by Date

DayHeaderOrder property is used to set the order by which resources must be displayed. OrderByDate will be displaying the resource based on date.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.DayHeaderOrder = DayHeaderOrder.OrderByDate;
<Page
    ...
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Schedule">

    <syncfusion:SfSchedule x:Name="schedule" ScheduleType="Day"
                       Resource="Hospital" DayHeaderOrder="OrderByDate"/>

</Page>

Changing the Resource order in UWP Schedule

Order by resource

DayHeaderOrder property is used to set the order by which resources must be displayed. OrderByResource will be displaying the resource based on resource collection.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.DayHeaderOrder = DayHeaderOrder.OrderByResource;
<Page
    ...
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Schedule">

    <syncfusion:SfSchedule x:Name="schedule" ScheduleType="Day"
                       Resource="Hospital" DayHeaderOrder="OrderByResource"/>

</Page>

Order by resource in UWP Schedule

Customizing resource visibility

Column count

This feature supports specifying the count of resources that need to be displayed per view. This support can be enabled by using the property DayViewColumnCount in SfSchedule. By default, its value is “zero”.

Note
This support is available for Day view alone.

using Syncfusion.UI.Xaml.Schedule;

            schedule.ScheduleType = ScheduleType.Day;
            schedule.DayViewColumnCount = 5;
<Page
    ...
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Schedule">

    <syncfusion:SfSchedule x:Name="schedule" ScheduleType="Day"
        Resource="Hospital" DayHeaderOrder="OrderByDate" DayViewColumnCount="5"/>

</Page>

Resource Visibility Customization in UWP Schedule