Resource View in .NET MAUI Scheduler
The .NET MAUI Scheduler control allows you to group appointments based on the resources associated with them in the day, week, workweek, month, timeline day, timeline week, timeline workweek, and timeline month views, with complete business object binding, multi-resource appointment sharing, and UI customization features.
Create resources to the Scheduler by using the SchedulerResource
You can create a resource view by setting the Name, Id, Background, and Foreground and DataItem properties of the built-in SchedulerResource class and assign SchedulerResource collection to the scheduler by using the Resources property of the SchedulerResourceView class.
In the Day, Week, Work Week, and Month views, resources are displayed horizontally on desktop platforms and under an adaptive header on mobile platforms. In the Timeline views (Timeline Day, Timeline Week, Timeline Work Week, and Timeline Month), resources are displayed vertically.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineWeek">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView Resources="{Binding Resources}" />
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
// Adding schedule resource in the scheduler resource collection.
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.Blue, Background = Colors.Green, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.Blue, Background = Colors.Green, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.Blue, Background = Colors.Green, Id = "1002" },
};
// Adding the scheduler resource collection to the schedule resources of SfScheduler.
this.scheduler.ResourceView.Resources = Resources;
}
}Assigning Scheduler resources to appointments
Appointments associated with the ResourceView Resources will be displayed by setting the SchedulerResourceView resource Id in the SchedulerAppointment by using the ResourceIds.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineWeek" AppointmentsSource="{Binding Appointments}">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView Resources="{Binding Resources}" />
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
// Adding schedule resource in the scheduler resource collection.
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.Blue, Background = Colors.Green, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.Blue, Background = Colors.Green, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.Blue, Background = Colors.Green, Id = "1002" },
};
// Adding the scheduler resource collection to the schedule resources of SfScheduler.
this.scheduler.ResourceView.Resources = Resources;
var appointment = new ObservableCollection<SchedulerAppointment>();
//Adding scheduler appointment in the scheduler appointment collection.
appointment.Add(new SchedulerAppointment()
{
StartTime = DateTime.Today.AddHours(9),
EndTime = DateTime.Today.AddHours(11),
Subject = "Client Meeting",
Location = "Hutchison road",
ResourceIds = new ObservableCollection<object>() { "1000" }
});
//Adding the scheduler appointment collection to the AppointmentsSource of .NET MAUI Scheduler.
this.scheduler.AppointmentsSource = appointment;
}
}
Multiple resource sharing using Scheduler resources
Multiple resources can share the same events or appointments by declaring resources ids in ResourceIds in SchedulerAppointment class. If the appointment details are edited or updated, then the changes will be reflected on all other shared instances simultaneously.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineWeek">
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var appointment = new ObservableCollection<SchedulerAppointment>();
//Adding scheduler appointment in the scheduler appointment collection.
appointment.Add(new SchedulerAppointment()
{
StartTime = DateTime.Today.AddHours(9),
EndTime = DateTime.Today.AddHours(11),
Subject = "Client Meeting",
Location = "Hutchison road",
//Multi resource share same event
ResourceIds = new ObservableCollection<object>() { "1000", "1001","1002" }
});
//Adding the scheduler appointment collection to the AppointmentsSource of .NET MAUI Scheduler.
this.scheduler.AppointmentsSource = appointment;
}
}
Horizontal resource grouping - Desktop
In the Day, Week, WorkWeek, and Month views, you can control whether dates are grouped under resources or resources are grouped under dates by using the ResourceGroupType property of the SchedulerResourceView class.
Grouping by Resource
Days view
The ResourceGroupType is set to Resource by default. In this mode, the scheduler arranges the dates under each resource.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView ResourceGroupType="Resource"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.ResourceGroupType = SchedulerResourceGroupType.Resource;
}
}
Month view
In Month View, grouping is supported only by Resource (ResourceGroupType=”Resource”), where each resource is rendered with its own independent month calendar layout to clearly display appointments and availability; for example, if three resources are defined, the view will show three distinct monthly calendars side by side, each containing only the appointments assigned to that specific resource.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Month">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView ResourceGroupType="Resource"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.MediumAquamarine, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Salmon, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.MediumOrchid, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.ResourceGroupType = SchedulerResourceGroupType.Resource;
}
}
Grouping by Date
When the ResourceGroupType is set to Date, the scheduler arranges the resources under each date.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView ResourceGroupType="Date"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.ResourceGroupType = SchedulerResourceGroupType.Date;
}
}
In the
Day,Week, andWorkWeekviews, grouping resources by date is supported. However, in theMonthview, grouping resources by date is not supported. When theResourceGroupTypeis set toDatewhile theViewisMonth, the scheduler automatically renders resources based onResourceGroupTypeasResourceonly.
Adaptive resource grouping
The .NET MAUI Scheduler groups resources under an adaptive header in the Day, Week, WorkWeek, and Month views. On mobile platforms (Android and iOS), this adaptive UI is used by default. On desktop platforms (Windows and macOS), the horizontal grouped resource view is used by default, and the adaptive UI can be enabled using the EnableAdaptiveUI property of the SchedulerResourceView.
Desktop view
On desktop platforms (Windows and macOS), resources are displayed by default using the horizontal grouped resource view in the Day, Week, WorkWeek, and Month views. To use the adaptive resource grouping UI on desktop instead, set the EnableAdaptiveUI property of the SchedulerResourceView to true. When enabled, the Scheduler renders the adaptive UI (hamburger header and drawer) instead of the horizontal grouped layout.
The default value of the EnableAdaptiveUI property is false. This property has no effect on mobile platforms (Android and iOS), which always use the adaptive UI.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler" View="Day">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView EnableAdaptiveUI="True"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.MediumAquamarine, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Salmon, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.MediumOrchid, Id = "1002" },
};
this.Scheduler.ResourceView.Resources = Resources;
this.Scheduler.ResourceView.EnableAdaptiveUI = true;
}
}
The
EnableAdaptiveUIproperty is supported only in the Day, Week, WorkWeek, and Month views on desktop platforms. It has no effect on Timeline views or on mobile platforms.
Mobile view
On mobile platforms (Android and iOS), resources are always displayed using the adaptive UI. The EnableAdaptiveUI property has no effect on these platforms, since the adaptive UI is the only available resource layout.
Days view
In Day view, resources are presented through an adaptive resource panel on mobile platforms.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.MediumAquamarine, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Salmon, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.MediumOrchid, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
}
}
Month view
In Month view, resources are presented through an adaptive resource panel on mobile platforms.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Month"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.MediumAquamarine, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Salmon, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.MediumOrchid, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
}
}
Customize hamburger icon color
The hamburger icon color can be customized by using the HamburgerIconColor property of the SchedulerResourceView.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView HamburgerIconColor="Red" />
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
new SchedulerResource() { Name = "James William", Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.HamburgerIconColor = Colors.Red;
}
}
Customize drawer resource selection color
The drawer resource selection color can be customized by using the DrawerResourceSelectionColor property of the SchedulerResourceView.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView DrawerResourceSelectionColor="DodgerBlue" />
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
new SchedulerResource() { Name = "James William", Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.DrawerResourceSelectionColor = Brush.DodgerBlue;
}
}
Customize drawer background
The drawer background can be customized by using the DrawerBackground property of the SchedulerResourceView.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView DrawerBackground="LightGoldenrodYellow" />
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
new SchedulerResource() { Name = "James William", Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.DrawerBackground = Brush.LightGoldenrodYellow;
}
}
Customize adaptive header appearance using DataTemplate
The adaptive header appearance customization can be achieved by using the AdaptiveHeaderTemplate property of SchedulerResourceView in the SfScheduler.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView>
<scheduler:SchedulerResourceView.AdaptiveHeaderTemplate>
<DataTemplate>
<Grid Padding="8" BackgroundColor="PaleGreen">
<HorizontalStackLayout Spacing="8" VerticalOptions="Center">
<Label Text="☰"
FontSize="16"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
TextColor="Red"
Margin="0,0,12,0">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Label.GestureRecognizers>
</Label>
<Label Text="{Binding Resource.Name}"
FontAttributes="Bold"
FontSize="14"
TextColor="DarkViolet" />
</HorizontalStackLayout>
</Grid>
</DataTemplate>
</scheduler:SchedulerResourceView.AdaptiveHeaderTemplate>
</scheduler:SchedulerResourceView>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
new SchedulerResource() { Name = "James William", Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.AdaptiveHeaderTemplate = new DataTemplate(() =>
{
var grid = new Grid
{
Padding = 8,
BackgroundColor = Colors.PaleGreen
};
var stack = new HorizontalStackLayout
{
Spacing = 8,
VerticalOptions = LayoutOptions.Center
};
var menuLabel = new Label
{
Text = "☰",
FontSize = 16,
TextColor = Colors.Red,
VerticalTextAlignment = TextAlignment.Center,
HorizontalTextAlignment = TextAlignment.Center,
Margin = new Thickness(0, 0, 12, 0)
};
var tap = new TapGestureRecognizer();
tap.Tapped += OnTapped;
menuLabel.GestureRecognizers.Add(tap);
var nameLabel = new Label
{
FontAttributes = FontAttributes.Bold,
FontSize = 14,
TextColor = Colors.DarkViolet
};
nameLabel.SetBinding(Label.TextProperty, "Resource.Name");
stack.Add(menuLabel);
stack.Add(nameLabel);
grid.Add(stack);
return grid;
});
}
private void OnTapped(object sender, TappedEventArgs e)
{
if (sender is Label label && label.BindingContext is SchedulerAdaptiveResource resource)
{
resource.ToggleResourceDrawerView();
}
}
}
- The BindingContext of the AdaptiveHeaderTemplate is the SchedulerAdaptiveResource.
- The ToggleResourceDrawerView method should be called on the SchedulerAdaptiveResource instance obtained from the control’s BindingContext. It toggles the visibility of the drawer resource view. It is used only when the AdaptiveHeaderTemplate is applied.
Customize drawer resource appearance using DataTemplate
The drawer resource appearance customization can be achieved by using the DrawerResourceTemplate property of SchedulerResourceView in the SfScheduler.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<ContentPage.Resources>
<DataTemplate x:Key="drawerResourceTemplate">
<Grid Background="{Binding DataItem.BackgroundBrush}">
<Label Margin="10" FontAttributes="Bold" Text="{Binding DataItem.Name}" TextColor="{Binding DataItem.ForegroundBrush}"/>
</Grid>
</DataTemplate>
</ContentPage.Resources>
<scheduler:SfScheduler x:Name="scheduler">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView DrawerResourceTemplate="{StaticResource drawerResourceTemplate}">
<scheduler:SchedulerResourceView.Mapping>
<scheduler:SchedulerResourceMapping
Id = "Id"
Name="Name"
Background="BackgroundColor"
Foreground="ForegroundColor"/>
</scheduler:SchedulerResourceView.Mapping>
</scheduler:SchedulerResourceView>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public class Employee
{
public string Name { get; set; }
public object Id { get; set; }
public Brush BackgroundBrush { get; set; }
public Brush ForegroundBrush { get; set; }
}
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<Employee>()
{
new Employee() { Name = "Sophia", Id = "1000", BackgroundBrush = Brush.PaleGreen, ForegroundBrush = Brush.Black },
new Employee() { Name = "Zoey Addison", Id = "1001", BackgroundBrush = Brush.SkyBlue, ForegroundBrush = Brush.Black },
new Employee() { Name = "James William", Id = "1002", BackgroundBrush = Brush.LightPink, ForegroundBrush = Brush.Black },
};
this.scheduler.ResourceView.Resources = Resources;
}
}
The BindingContext of the DrawerResourceTemplate is the SchedulerResource. and the custom data object can be bound in DrawerResourceTemplate by using SchedulerResource.DataItem .
Hierarchical resource view
The Scheduler supports displaying resources in a hierarchical structure, enabling related resources to be organized under parent resources. This provides a structured representation of resource data and helps manage resource relationships across multiple levels. Hierarchical resources improve navigation and resource management by presenting large resource collections in a clear and organized layout. Hierarchical resource view is supported in all Scheduler view types except the Agenda view.
Create hierarchical resources
Use the GroupId property of SchedulerResource to create parent-child relationships between resources. Each resource must have a unique Id. To add a resource under a parent resource, set the child resource’s GroupId to the Id of the parent resource.
In the following example, Team A, Team B, and Team C are parent resources, and their members are displayed as child resources under the corresponding team.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler" View="TimelineDay"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Team A", Id = "1001"},
new SchedulerResource() { Name = "Sophia", Id = "1002", GroupId = "1001" },
new SchedulerResource() { Name = "James", Id = "1003", GroupId = "1001" },
new SchedulerResource() { Name = "Team B", Id = "1004" },
new SchedulerResource() { Name = "Emma", Id = "1005", GroupId = "1004" },
new SchedulerResource() { Name = "David", Id = "1006", GroupId = "1004"},
new SchedulerResource() { Name = "Team C", Id = "1007"},
new SchedulerResource() { Name = "Michael", Id = "1008", GroupId = "1007"},
new SchedulerResource() { Name = "Ethan", Id = "1009", GroupId = "1007"},
};
this.Scheduler.ResourceView.Resources = Resources;
}
}Resources without a GroupId are displayed as individual resources. Resources with a GroupId are displayed as child resources under the corresponding resource whose Id matches the specified GroupId.
Create nested resource hierarchies
Resources can be organized across multiple hierarchy levels by setting a resource’s GroupId to the Id of its parent resource. A child resource can also act as a parent resource, allowing nested resource hierarchies to be created.
In the following example, Project Team contains Design Team and Testing Team. The team members are then grouped under their respective teams, creating a multi-level hierarchy.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler" View="TimelineDay"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Project Team", Id = "1006" },
new SchedulerResource() { Name = "Design Team", Id = "1007", GroupId = "1006" },
new SchedulerResource() { Name = "Michael", Id = "1008", GroupId = "1007" },
new SchedulerResource() { Name = "Ethan", Id = "1009", GroupId = "1007" },
new SchedulerResource() { Name = "Testing Team", Id = "1010", GroupId = "1006" },
new SchedulerResource() { Name = "Olivia", Id = "1011", GroupId = "1010" },
new SchedulerResource() { Name = "Mia", Id = "1012", GroupId = "1010" },
};
this.Scheduler.ResourceView.Resources = Resources;
}
}The Scheduler automatically creates the hierarchy based on the configured Id and GroupId values. This enables resources to be organized across multiple levels, where a resource can act as both a child resource and a parent resource within the same hierarchy.
Expand and collapse resource nodes
Use the IsNodeCollapsed property of SchedulerResource to specify whether a parent resource node is initially displayed in an expanded or collapsed state. By default, the value is false, which displays the parent resource node along with its child resources.
When IsNodeCollapsed is set to true, the child resources are hidden when the Scheduler is first loaded. Parent resource nodes that contain child resources display an expand/collapse icon before the resource name. Clicking the icon shows or hides the child resources.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler" View="TimelineDay"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Team A", Id = "1001", IsNodeCollapsed = false},
new SchedulerResource() { Name = "Sophia", Id = "1002", GroupId = "1001"},
new SchedulerResource() { Name = "James", Id = "1003", GroupId = "1001" },
new SchedulerResource() { Name = "Team B", Id = "1004", IsNodeCollapsed = true },
new SchedulerResource() { Name = "Emma", Id = "1005", GroupId = "1004"},
new SchedulerResource() { Name = "David", Id = "1006", GroupId = "1004"},
new SchedulerResource() { Name = "Team C", Id = "1007", IsNodeCollapsed = true},
new SchedulerResource() { Name = "Michael", Id = "1008", GroupId = "1007"},
new SchedulerResource() { Name = "Ethan", Id = "1009", GroupId = "1007"},
};
this.Scheduler.ResourceView.Resources = Resources;
}
}In this example, Team A is initially expanded, while Team B and Team C are initially collapsed.
The
IsNodeCollapsedproperty is effective only for parent resource nodes that contain child resources. Setting this property on a resource that does not contain child resources has no effect.
Assign appointments to hierarchical resources
Appointments can be assigned to hierarchical resources using the ResourceIds collection of SchedulerAppointment or the equivalent resource mapping property in a custom appointment class. To assign an appointment, add the Id of the corresponding child resource to the ResourceIds collection. The Scheduler displays the appointment under the specified child resource. Parent resource nodes are used to organize resources within the hierarchy and cannot be assigned directly to appointments.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler" View="TimelineDay"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Team A", Id = "1001"},
new SchedulerResource() { Name = "Sophia", Id = "1002", GroupId = "1001"},
new SchedulerResource() { Name = "James", Id = "1003", GroupId = "1001" },
new SchedulerResource() { Name = "Team B", Id = "1004"},
new SchedulerResource() { Name = "Emma", Id = "1005", GroupId = "1004"},
new SchedulerResource() { Name = "David", Id = "1006", GroupId = "1004"},
new SchedulerResource() { Name = "Team C", Id = "1007"},
new SchedulerResource() { Name = "Michael", Id = "1008", GroupId = "1007"},
new SchedulerResource() { Name = "Ethan", Id = "1009", GroupId = "1007"},
};
this.Scheduler.ResourceView.Resources = resources;
var appointments = new ObservableCollection<SchedulerAppointment>()
{
new SchedulerAppointment()
{
StartTime = new DateTime(2026, 9, 15, 7, 0, 0),
EndTime = new DateTime(2026, 9, 15, 9, 0, 0),
Subject = "Enterprise Discovery",
Location = "Room 101",
Background = Color.FromArgb("#EC4899"),
ResourceIds = new ObservableCollection<object>() { "1002" }
},
new SchedulerAppointment()
{
StartTime = new DateTime(2026, 9, 15, 8, 30, 0),
EndTime = new DateTime(2026, 9, 15, 10, 30, 0),
Subject = "Territory Planning",
Location = "Room 102",
Background = Color.FromArgb("#C026D3"),
ResourceIds = new ObservableCollection<object>() { "1003" }
},
new SchedulerAppointment()
{
StartTime = new DateTime(2026, 9, 15, 10, 0, 0),
EndTime = new DateTime(2026, 9, 15, 12, 0, 0),
Subject = "Proposal Review",
Location = "Conference Call",
Background = Color.FromArgb("#EF6C00"),
ResourceIds = new ObservableCollection<object>() { "1005" }
},
new SchedulerAppointment()
{
StartTime = new DateTime(2026, 9, 15, 12, 0, 0),
EndTime = new DateTime(2026, 9, 15, 14, 0, 0),
Subject = "Deal Strategy",
Location = "Room 103",
Background = Color.FromArgb("#22C55E"),
ResourceIds = new ObservableCollection<object>() { "1006" }
},
new SchedulerAppointment()
{
StartTime = new DateTime(2026, 9, 15, 13, 0, 0),
EndTime = new DateTime(2026, 9, 15, 15, 0, 0),
Subject = "Client Onboarding",
Location = "Room 104",
Background = Color.FromArgb("#3B82F6"),
ResourceIds = new ObservableCollection<object>() { "1008" }
},
new SchedulerAppointment()
{
StartTime = new DateTime(2026, 9, 15, 15, 0, 0),
EndTime = new DateTime(2026, 9, 15, 17, 0, 0),
Subject = "Escalation Review",
Location = "Room 105",
Background = Color.FromArgb("#00838F"),
ResourceIds = new ObservableCollection<object>() { "1009" }
},
};
this.Scheduler.AppointmentsSource = appointments;
}
}
Assign special time regions to hierarchical resources
Special time regions can be displayed for specific resources in a hierarchical resource view by adding resource Id values to the ResourceIds collection of SchedulerTimeRegion. To display a special time region for a resource, add the Id of the corresponding child resource to the ResourceIds collection. The special time region is then shown only for that child resource. Since parent resource nodes are used to represent the hierarchy, special time regions can be applied only to child resources.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler" View="TimelineDay"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Team A", Id = "1001"},
new SchedulerResource() { Name = "Sophia", Id = "1002", GroupId = "1001"},
new SchedulerResource() { Name = "James", Id = "1003", GroupId = "1001" },
new SchedulerResource() { Name = "Team B", Id = "1004"},
new SchedulerResource() { Name = "Emma", Id = "1005", GroupId = "1004"},
new SchedulerResource() { Name = "David", Id = "1006", GroupId = "1004"},
new SchedulerResource() { Name = "Team C", Id = "1007"},
new SchedulerResource() { Name = "Michael", Id = "1008", GroupId = "1007"},
new SchedulerResource() { Name = "Ethan", Id = "1009", GroupId = "1007"},
};
this.Scheduler.ResourceView.Resources = resources;
this.Scheduler.TimelineView.TimeRegions = this.GetTimeRegion();
}
private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
{
var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
var timeRegion = new SchedulerTimeRegion()
{
StartTime = DateTime.Today.Date.AddHours(13),
EndTime = DateTime.Today.Date.AddHours(14),
Text = "Lunch",
EnablePointerInteraction = false,
ResourceIds = new ObservableCollection<object>() { "1002", "1003", "1005", "1006", "1008", "1009" }
};
timeRegions.Add(timeRegion);
return timeRegions;
}
}
Horizontal Resource Grouping
When hierarchical resources are enabled, resources are displayed horizontally in the Day, Week, WorkWeek, and Month views on desktop platforms (Windows and macOS).
In this layout, parent resources are displayed at the top level, with their child resources arranged beneath them. The corresponding dates or time slot cells are rendered below each child resource.
For hierarchical resources, only ResourceGroupType="Resource" is supported. In this mode, dates and time slots are displayed under each resource. ResourceGroupType="Date" is not supported when hierarchical resource grouping is enabled.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler"
View="Week"
AllowedViews="Day,Week,WorkWeek,Month"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Team A", Background = Colors.LightYellow, Id = "1001"},
new SchedulerResource() { Name = "Sophia", Background = Colors.MintCream, Id = "1002", GroupId = "1001"},
new SchedulerResource() { Name = "James", Background = Colors.MistyRose, Id = "1003", GroupId = "1001" },
new SchedulerResource() { Name = "Team B",Background = Colors.LightYellow, Id = "1004"},
new SchedulerResource() { Name = "Emma", Background = Colors.MintCream, Id = "1005", GroupId = "1004"},
new SchedulerResource() { Name = "David", Background = Colors.MistyRose, Id = "1006", GroupId = "1004"},
new SchedulerResource() { Name = "Team C", Background = Colors.LightYellow, Id = "1007"},
new SchedulerResource() { Name = "Michael", Background = Colors.MintCream, Id = "1008", GroupId = "1007"},
new SchedulerResource() { Name = "Ethan", Background = Colors.MistyRose, Id = "1009", GroupId = "1007"},
};
this.Scheduler.ResourceView.Resources = resources;
}
}In the following images, Team A is displayed as the parent resource, while Sophia and James are displayed as child resources. The date columns and scheduling area are shown separately under each child resource, providing a clear side-by-side view of resource schedules.
Horizontal resource grouping is supported only on
desktopplatforms (WindowsandmacOS) in theDay,Week,WorkWeek, andMonthviews.
Vertical Resource Grouping
The Scheduler supports vertical resource grouping for hierarchical resources in TimelineDay, TimelineWeek, TimelineWorkWeek, and TimelineMonth views on both desktop (Windows and macOS) and mobile (Android and iOS) platforms.
In this layout, resources are displayed vertically along the left side of the Scheduler, with the corresponding date and time slot cells displayed beside each resource row. Parent resources can be expanded or collapsed to show or hide their child resources.
As shown in the following image, Team A, Team B, and Team C are displayed as parent resources, with their respective child resources listed beneath them. The scheduling area for each resource is aligned with the corresponding dates, providing a clear view of appointments and availability across the entire resource hierarchy.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler"
View="TimelineMonth"
AllowedViews="TimelineDay,TimelineWeek,TimelineWorkWeek,TimelineMonth"/>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Team A", Id = "1001"},
new SchedulerResource() { Name = "Sophia", Background = Colors.MintCream, Id = "1002", GroupId = "1001"},
new SchedulerResource() { Name = "James", Background = Colors.MistyRose, Id = "1003", GroupId = "1001" },
new SchedulerResource() { Name = "Team B", Id = "1004"},
new SchedulerResource() { Name = "Emma", Background = Colors.MintCream, Id = "1005", GroupId = "1004"},
new SchedulerResource() { Name = "David", Background = Colors.MistyRose, Id = "1006", GroupId = "1004"},
new SchedulerResource() { Name = "Team C", Id = "1007"},
new SchedulerResource() { Name = "Michael", Background = Colors.MintCream, Id = "1008", GroupId = "1007"},
new SchedulerResource() { Name = "Ethan", Background = Colors.MistyRose, Id = "1009", GroupId = "1007"},
};
this.Scheduler.ResourceView.Resources = resources;
}
}
Adaptive Resource Header
On mobile platforms (Android and iOS), resources are displayed through an adaptive resource header in Day, Week, WorkWeek, and Month views.
When resources are enabled, a hamburger menu icon is shown in the adaptive header. Tapping the icon opens a navigation drawer that displays all resources in a hierarchical structure. Parent resources can be expanded or collapsed to view their child resources.
As shown in the following image, Team A, Team B, and Team C are expanded, displaying all child resources in the hierarchy. Selecting a child resource displays the schedule associated with that resource, and the selected resource name is shown in the adaptive header for easy identification.
Visible Resource Count
The number of resources shown in the day, week, work week, month, timelineday, timelineweek, timelineworkweek views can be controlled using the VisibleResourceCount property of the SchedulerResourceView class. This lets you define how many resources are visible at a time.
Days View
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day" >
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView VisibleResourceCount="6"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource { Name = "Aiden Clark", Foreground = Colors.White, Background = Colors.LightSkyBlue,Id = "1002" },
new SchedulerResource { Name = "Mia Johnson", Foreground = Colors.White, Background = Colors.Tomato, Id = "1003" },
new SchedulerResource { Name = "Liam Parker", Foreground = Colors.White, Background = Colors.Orchid, Id = "1004" },
new SchedulerResource { Name = "Olivia Bennett", Foreground = Colors.White, Background = Colors.SlateBlue, Id = "1005" },
new SchedulerResource { Name = "Noah Ramirez", Foreground = Colors.White, Background = Colors.SeaGreen, Id = "1006" },
new SchedulerResource { Name = "Ava Thompson", Foreground = Colors.White, Background = Colors.Coral, Id = "1007" },
new SchedulerResource { Name = "Ethan Davis", Foreground = Colors.White, Background = Colors.DodgerBlue, Id = "1008" },
new SchedulerResource { Name = "Isabella Moore", Foreground = Colors.White, Background = Colors.MediumOrchid,Id = "1009" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.VisibleResourceCount = 6;
}
}
Month View
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Month" >
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView VisibleResourceCount="2"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.MediumAquamarine, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Salmon, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.MediumOrchid, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.VisibleResourceCount = 2;
}
}
Timeline View
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineDay" >
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView VisibleResourceCount="4"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
new SchedulerResource() { Name = "Brooklyn", Foreground = Colors.White, Background = Colors.LightSkyBlue, Id = "1003" },
new SchedulerResource() { Name = "Stephen", Foreground = Colors.White, Background = Colors.PeachPuff, Id = "1004" },
new SchedulerResource() { Name = "Elena", Foreground = Colors.White, Background = Colors.Pink, Id = "1005" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.VisibleResourceCount = 4;
}
}
- When
VisibleResourceCountis set to 0, the resource view layout is removed, and only the plain Scheduler view is shown.VisibleResourceCountapplies to the horizontal resource view on Windows and macOS, and to the timeline resource view on all platforms. When the value is -1 (default), the horizontal resource view displays three resources. In timeline resource views, the number of visible resource rows is determined by the minimum row height, and the auto row height.
Resource Header Height in Horizontal Resource Views
In the day, week, work week, and month views, resources are arranged horizontally. The height of the resource headers can be customized using the ResourceHeaderHeight property of the SchedulerResourceView class.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler"
View="Day"
AllowedViews="Day,Week,WorkWeek,Month" >
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView ResourceHeaderHeight="100"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.ResourceHeaderHeight = 100;
}
}
Resource Header Width in Vertical Resource Views
In the timeline day, timeline week, and timeline work week views, resources are arranged vertically. The width of the resource headers can be customized using the ResourceHeaderWidth property of the SchedulerResourceView class.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineDay" >
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView ResourceHeaderWidth="250"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.ResourceView.ResourceHeaderWidth = 250;
}
}
Resource minimum row height
You can customize resource minimum row height of visible resources in timeline day, timeline week, timeline workweek and timeline month views by using the MinimumRowHeight property of SchedulerResourceView in SfScheduler. By default, resource row height will be auto-expanded from minimum height based on the appointment counts.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineWeek"
AllowedViews="TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek" >
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView MinimumRowHeight="90"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.TimelineWeek;
scheduler.AllowedViews = SchedulerViews.TimelineDay | SchedulerViews.TimelineMonth | SchedulerViews.TimelineWeek | SchedulerViews.TimelineWorkWeek;
scheduler.ResourceView.MinimumRowHeight = 100;
this.Content = scheduler;
}
}
- By default, if the viewport height is greater than 400 then each resource height will be calculated by viewport size divided by the minimum value of scheduler resources count and 4 (default resource count).
- If the viewport height is lesser than 400 then each resource height will be calculated by default viewport size(4 (default resource*100)) divided by the minimum value of scheduler resources count and 4 (default resource count).
- If the MinimumRowHeight is less than the default row height then the default row height will be used.
Resource auto row height
You can enable or disable automatic resource row-height calculation in timeline day, timeline week, timeline workweek, and timeline month views by using the AutoRowHeight property of SchedulerResourceView in SfScheduler. The default value is true.
When AutoRowHeight is set to true, resource rows expand automatically based on the appointment count, similar to the default behavior used with MinimumRowHeight.
When AutoRowHeight is set to false, resource rows render in a fixed-height mode. The fixed height is determined by the following priority:
- VisibleResourceCount (if set) - height = viewportHeight / count.
- MinimumRowHeight (if set) - height = MinimumRowHeight.
- Otherwise, the default viewport calculation is applied.
When appointments exceed the visible slots in fixed-height mode, a +N text indicator is displayed. Tap the indicator to show a popup with all hidden appointments.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineWeek">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView AutoRowHeight="False"/>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SfScheduler scheduler = new SfScheduler();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
};
scheduler.ResourceView.Resources = Resources;
scheduler.View = SchedulerView.TimelineWeek;
scheduler.ResourceView.AutoRowHeight = false;
this.Content = scheduler;
}
}
AutoRowHeightis supported only in timeline views (TimelineDay,TimelineWeek,TimelineWorkWeek, andTimelineMonth).
Assign special time regions to scheduler resources
You can highlight the resources availability by creating special time regions in the day, week, workweek, timeline day, timeline week, and timeline workweek views. Special time regions can represent unavailable or reserved slots such as lunch breaks, team meetings, or non-working hours.
Special time regions for timeline views.
In the timeline views (timeline day, timeline week, and timeline work week), special time regions can be applied to visually highlight unavailable periods for different resources.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineWeek"
AllowedViews="TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek" >
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.TimelineView.TimeRegions = this.GetTimeRegion();
}
private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
{
var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
var timeRegion = new SchedulerTimeRegion()
{
StartTime = DateTime.Today.Date.AddHours(13),
EndTime = DateTime.Today.Date.AddHours(14),
Text = "Lunch",
EnablePointerInteraction = false,
ResourceIds= new ObservableCollection<object>() { "1000", "1001", "1002" }
};
timeRegions.Add(timeRegion);
return timeRegions;
}
}
Special time regions for days view.
In Days View (day, week, and work week) special time regions can be applied to visually highlight unavailable periods for different resources.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="Day"
AllowedViews="Day,Week,WorkWeek" >
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var Resources = new ObservableCollection<SchedulerResource>()
{
new SchedulerResource() { Name = "Sophia", Foreground = Colors.White, Background = Colors.LightGreen, Id = "1000" },
new SchedulerResource() { Name = "Zoey Addison", Foreground = Colors.White, Background = Colors.Gold, Id = "1001" },
new SchedulerResource() { Name = "James William", Foreground = Colors.White, Background = Colors.Violet, Id = "1002" },
};
this.scheduler.ResourceView.Resources = Resources;
this.scheduler.DaysView.TimeRegions = this.GetTimeRegion();
}
private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
{
var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
var timeRegion = new SchedulerTimeRegion()
{
StartTime = DateTime.Today.Date.AddHours(13),
EndTime = DateTime.Today.Date.AddHours(14),
Text = "Lunch",
EnablePointerInteraction = false,
ResourceIds= new ObservableCollection<object>() { "1000", "1001", "1002" }
};
timeRegions.Add(timeRegion);
return timeRegions;
}
}
Business object binding for resources
The Schedule supports full data binding to Resources in the SchedulerResourceView class. Specify the SchedulerResourceMapping property of the SchedulerResourceView class to map the custom properties to the schedule resource.
| Property Name | Description |
|---|---|
| Name | Maps the property name of custom class, which is equivalent to Name in SchedulerResource. |
| Id | Maps the property name of custom class, which is equivalent to Id in SchedulerResource. |
| Background | Maps the property name of custom class, which is equivalent to Background in SchedulerResource. |
| Foreground | Maps the property name of custom class, which is equivalent to Foreground in SchedulerResource. |
| GroupId | Maps the property name of custom class, which is equivalent to GroupId in SchedulerResource. |
| IsNodeCollapsed | Maps the property name of custom class, which is equivalent to IsNodeCollapsed in SchedulerResource. |
Custom resource class should contain a mandatory field for resource
Id.
Mapping resource business object or custom field
Create a custom class Employee with mandatory fields Name, Id, ForegroundColor, and BackgroundColor.
public class Employee
{
public string Name {get; set;}
public string Id {get; set;}
public Brush BackgroundColor {get; set; }
public Brush ForegroundColor {get; set; }
}Map the properties of the Employee class by using the SchedulerResourceMapping property of the SchedulerResourceView.
When publishing in AOT mode on iOS and macOS, ensure that
[Preserve(AllMembers = true)]is added to the model class to maintain resources binding.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler Name="Schedule" ViewType="TimelineWeek">
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView>
<scheduler:SchedulerResourceView.Mapping>
<scheduler:SchedulerResourceMapping Name="Name"
Id="Id"
Background="Background"
Foreground="Foreground"/>
</scheduler:SchedulerResourceView.Mapping>
</scheduler:SchedulerResourceView>
</scheduler:SfScheduler.ResourceView>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.TimelineWeek;
// Schedule data mapping for custom resource.
SchedulerResourceMapping resourceMapping = new SchedulerResourceMapping();
resourceMapping.Name = "Name";
resourceMapping.Id = "Id";
resourceMapping.Background = "BackgroundColor";
resourceMapping.Foreground = "ForegroundColor";
scheduler.ResourceView.Mapping = resourceMapping;
this.Content = scheduler;
}
}Assign resource business objects to scheduler
Add the resources of Employee collection that can be assigned to the Resources in the SchedulerResourceView class which is of IEnumerable type. Also add or remove scheduler resources dynamically.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler Name="Schedule" ViewType="TimelineWeek">
<scheduler:SfScheduler.ResourceMapping>
<scheduler:ResourceMapping Id="Id" Name="Name" Background="BackgroundColor" Foreground="ForegroundColor"/>
</scheduler:SfScheduler.ResourceMapping>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
// Creating and Adding custom resource in scheduler resource collection.
var Resources = new ObservableCollection<Employee>()
{
new Employee () {Name = "Sophia", Background=Colors.Blue, Id = "1000", Foreground = Colors.Green},
new Employee () {Name = "Zoey Addison", Background=Colors.Blue, Id = "1001", Foreground = Colors.Green},
new Employee () {Name = "James William", Background=Colors.Blue, Id = "1002", Foreground = Colors.Green},
};
// Adding the scheduler resource collection to the schedule resources of SfSchedule.
this.scheduler.ResourceView.Resources = Resources;
}
}Assign the resource objects to appointment business object
Associate the ResourceView SchedulerResourceMapping to the custom appointment by mapping resource Id in the ResourceIds property of SchedulerAppointmentMapping.
/// <summary>
/// Represents the custom data properties.
/// </summary>
public class Meeting
{
public string EventName {get; set;}
public DateTime From {get; set;}
public DateTime To {get; set;}
public ObservableCollection<object> Resources
}Map those properties of the Meeting class to schedule appointments by using the SchedulerAppointmentMapping properties.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="scheduler" View="TimelineWeek"
AppointmentsSource="{Binding Events}"
AllowedViews="TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek" >
<scheduler:SfScheduler.AppointmentMapping>
<scheduler:SchedulerAppointmentMapping
Subject="EventName"
StartTime="From"
EndTime="To"
Background="Background"
IsAllDay="IsAllDay"
StartTimeZone="StartTimeZone"
EndTimeZone="EndTimeZone"
ResourceIds="Resources"/>
</scheduler:SfScheduler.AppointmentMapping>
</scheduler:SfScheduler>
</ContentPage>using Syncfusion.Maui.Scheduler;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
//Schedule data mapping for custom appointments
SchedulerAppointmentMapping dataMapping = new SchedulerAppointmentMapping();
dataMapping.Subject = "EventName";
dataMapping.StartTime = "From";
dataMapping.EndTime = "To";
dataMapping.Background = "Color";
dataMapping.ResourceIds = "Resources";
this.scheduler.AppointmentMapping = dataMapping;
}
}Schedule meetings for a resource by setting From, To, and Resources of the Meeting class.
using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;
. . .
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Meeting meeting = new Meeting ();
meeting.From = new DateTime(2020, 07, 01, 10, 0, 0);
meeting.To = meeting.From.AddHours(1);
meeting.EventName = "Meeting";
meeting.Resources = new ObservableCollection<object> { (Resources[0] as Employee).Id, (Resources[1] as Employee).Id };
var Meetings = new ObservableCollection<Meeting> ();
Meetings.Add(meeting);
this.Schedule.ItemsSource = Meetings;
}
}Programmatic resource selection
You can programmatically select the resource by using the SelectedResourceId and SelectedDate of the SfScheduler. Please click here to see more details about programmatic date selection.
Appearance customization
The resource appearance customization can be achieved by using the HeaderTemplate and TextStyle properties of the SchedulerResourceView.
Customize resource appearance using text style
The resource header text style can be customized by using the TextStyle property of the SchedulerResourceView.
Customize resource appearance using HeaderTemplate
The resource appearance customization can be achieved by using the HeaderTemplate property of the SchedulerResourceView.
<ContentPage
. . .
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<ContentPage.Behaviors>
<local:ResourceViewBehavior/>
</ContentPage.Behaviors>
<Grid>
<scheduler:SfScheduler x:Name="scheduler" View="TimelineMonth"
AppointmentsSource="{Binding Events}"
AllowedViews="TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek" >
<scheduler:SfScheduler.Resources>
<local:SfImageSourceConverter x:Key="imageConverter"/>
</scheduler:SfScheduler.Resources>
<scheduler:SfScheduler.ResourceView>
<scheduler:SchedulerResourceView Resources="{Binding Resources}">
<scheduler:SchedulerResourceView.HeaderTemplate>
<DataTemplate>
<StackLayout Padding="5" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Fill">
<Border StrokeThickness="5"
Stroke="{Binding Background}"
HorizontalOptions="Center"
HeightRequest="{OnIdiom Desktop = 70, Phone = 65}"
WidthRequest="{OnIdiom Desktop= 70, Phone=65}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="150"/>
</Border.StrokeShape>
<Image WidthRequest="{OnIdiom Desktop = 55, Phone = 50}"
HeightRequest="{OnIdiom Desktop = 55, Phone = 50}"
HorizontalOptions="Center"
Source="{Binding DataItem.ImageName,Converter={StaticResource imageConverter}}"
VerticalOptions="Center"
Aspect="Fill"/>
</Border>
<Label Text="{Binding Name}" TextColor="Black" FontSize="{OnIdiom Desktop= 12, Phone=10}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
</StackLayout>
</DataTemplate>
</scheduler:SchedulerResourceView.HeaderTemplate>
<scheduler:SchedulerResourceView.Mapping>
<scheduler:SchedulerResourceMapping Name="Name"
Id="Id"
Background="Background"
Foreground="Foreground"/>
</scheduler:SchedulerResourceView.Mapping>
</scheduler:SchedulerResourceView>
</scheduler:SfScheduler.ResourceView>
<scheduler:SfScheduler.AppointmentMapping>
<scheduler:SchedulerAppointmentMapping
Subject="EventName"
StartTime="From"
EndTime="To"
Background="Background"
IsAllDay="IsAllDay"
StartTimeZone="StartTimeZone"
EndTimeZone="EndTimeZone"
ResourceIds="Resources"/>
</scheduler:SfScheduler.AppointmentMapping>
<scheduler:SfScheduler.TimelineView>
<scheduler:SchedulerTimelineView
StartHour="8"
EndHour="20"/>
</scheduler:SfScheduler.TimelineView>
<scheduler:SfScheduler.BindingContext>
<local:ResourceViewViewModel/>
</scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>
</Grid>
</ContentPage>public class SfImageSourceConverter : IValueConverter
{
/// <summary>
///
/// </summary>
/// <param name="value"></param>
/// <param name="targetType"></param>
/// <param name="parameter"></param>
/// <param name="culture"></param>
/// <returns></returns>
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string? source = value as string;
string? assemblyName = typeof(SfImageSourceConverter).GetTypeInfo().Assembly.GetName().Name; //GetType().GetTypeInfo().Assembly.GetName().Name;
return ImageSource.FromResource(assemblyName + ".Resources.Images." + source, typeof(SfImageSourceConverter).GetTypeInfo().Assembly);
}
/// <summary>
///
/// </summary>
/// <param name="value"></param>
/// <param name="targetType"></param>
/// <param name="parameter"></param>
/// <param name="culture"></param>
/// <returns></returns>
/// <exception cref="NotImplementedException"></exception>
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}public class ResourceViewViewModel : INotifyPropertyChanged
{
/// <summary>
/// current day meetings
/// </summary>
private List<string> currentDayMeetings;
/// <summary>
/// color collection
/// </summary>
private List<Brush> colors;
/// <summary>
/// Appointment start hours.
/// </summary>
private List<int> startHours;
/// <summary>
/// list of meeting
/// </summary>
private ObservableCollection<Meeting>? events;
/// <summary>
/// name collection
/// </summary>
private List<string> employeeNames;
/// <summary>
/// resources
/// </summary>
private ObservableCollection<object>? resources;
/// <summary>
/// Initializes a new instance of the <see cref="ResourceViewViewModel" /> class.
/// </summary>
public ResourceViewViewModel()
{
this.employeeNames = new List<string>();
this.colors = new List<Brush>();
this.startHours = new List<int>();
this.Events = new ObservableCollection<Meeting>();
this.currentDayMeetings = new List<string>();
this.Resources = new ObservableCollection<object>();
this.DisplayDate = DateTime.Now.Date.AddHours(8).AddMinutes(50);
this.InitializeDataForBookings();
this.InitializeResources();
this.BookingAppointments();
}
private void InitializeResources()
{
Random random = new Random();
for (int i = 0; i < 9; i++)
{
Employee employees = new Employee();
employees.Name = employeeNames[i];
employees.Background = this.colors[random.Next(0, 9)];
employees.Foreground = (employees.Background as SolidColorBrush)?.Color.GetLuminosity() > 0.7 ? Colors.Black : Colors.White;
employees.Id = i.ToString();
if (employees.Name == "Brooklyn")
{
employees.ImageName = "people_circle8.png";
}
else if (employees.Name == "Sophia")
{
employees.ImageName = "people_circle1.png";
}
else if (employees.Name == "Stephen")
{
employees.ImageName = "people_circle12.png";
}
else if (employees.Name == "Zoey Addison")
{
employees.ImageName = "people_circle2.png";
}
else if (employees.Name == "Daniel")
{
employees.ImageName = "people_circle14.png";
}
else if (employees.Name == "Emilia")
{
employees.ImageName = "people_circle3.png";
}
else if (employees.Name == "Adeline Ruby")
{
employees.ImageName = "people_circle4.png";
}
else if (employees.Name == "James William")
{
employees.ImageName = "people_circle5.png";
}
else if (employees.Name == "Kinsley Elena")
{
employees.ImageName = "people_circle6.png";
}
Resources?.Add(employees);
}
}
/// <summary>
/// Property changed event handler
/// </summary>
public event PropertyChangedEventHandler? PropertyChanged;
#region ListOfMeeting
/// <summary>
/// Gets or sets appointments.
/// </summary>
public ObservableCollection<Meeting>? Events
{
get
{
return this.events;
}
set
{
this.events = value;
this.RaiseOnPropertyChanged("Events");
}
}
#endregion
public ObservableCollection<object>? Resources
{
get
{
return resources;
}
set
{
resources = value;
this.RaiseOnPropertyChanged("Resources");
}
}
/// <summary>
/// Gets or sets the schedule display date.
/// </summary>
public DateTime DisplayDate { get; set; }
#region BookingAppointments
/// <summary>
/// Method for booking appointments.
/// </summary>
internal void BookingAppointments()
{
Random randomTime = new Random();
List<Point> randomTimeCollection = this.GettingTimeRanges();
DateTime date;
DateTime dateFrom = DateTime.Now.AddDays(-80);
DateTime dateTo = DateTime.Now.AddDays(80);
DateTime dateRangeStart = DateTime.Now.AddDays(-70);
DateTime dateRangeEnd = DateTime.Now.AddDays(70);
if (resources == null)
{
return;
}
for (date = dateFrom; date < dateTo; date = date.AddDays(1))
{
for (int res = 0; res < 2; res++)
{
var resource = resources[randomTime.Next(resources.Count)] as Employee;
if ((DateTime.Compare(date, dateRangeStart) > 0) && (DateTime.Compare(date, dateRangeEnd) < 0))
{
for (int additionalAppointmentIndex = 0; additionalAppointmentIndex < 3; additionalAppointmentIndex++)
{
Meeting meeting = new Meeting();
int hour = randomTime.Next((int)randomTimeCollection[additionalAppointmentIndex].X, (int)randomTimeCollection[additionalAppointmentIndex].Y);
meeting.From = new DateTime(date.Year, date.Month, date.Day, this.startHours[randomTime.Next(0, 2)], 0, 0);
meeting.To = meeting.From.AddHours(12);
meeting.EventName = this.currentDayMeetings[randomTime.Next(9)];
meeting.Background = this.colors[randomTime.Next(9)];
meeting.IsAllDay = false;
meeting.StartTimeZone = TimeZoneInfo.Local;
meeting.EndTimeZone = TimeZoneInfo.Local;
var coll = new ObservableCollection<object>();
if (resource != null && resource.Id != null)
{
coll.Add(resource.Id);
}
meeting.Resources = coll;
this.Events?.Add(meeting);
}
}
else
{
Meeting meeting = new Meeting();
meeting.From = new DateTime(date.Year, date.Month, date.Day, randomTime.Next(9, 11), 0, 0);
meeting.To = meeting.From.AddDays(2).AddHours(4);
meeting.EventName = this.currentDayMeetings[randomTime.Next(9)];
meeting.Background = this.colors[randomTime.Next(9)];
meeting.IsAllDay = true;
meeting.StartTimeZone = TimeZoneInfo.Local;
meeting.EndTimeZone = TimeZoneInfo.Local;
var coll = new ObservableCollection<object>();
if (resource != null && resource.Id != null)
{
coll.Add(resource.Id);
}
meeting.Resources = coll;
this.Events?.Add(meeting);
}
}
}
}
#endregion BookingAppointments
#region GettingTimeRanges
/// <summary>
/// Method for get timing range.
/// </summary>
/// <returns>return time collection</returns>
private List<Point> GettingTimeRanges()
{
List<Point> randomTimeCollection = new List<Point>();
randomTimeCollection.Add(new Point(9, 11));
randomTimeCollection.Add(new Point(12, 14));
randomTimeCollection.Add(new Point(15, 17));
return randomTimeCollection;
}
#endregion GettingTimeRanges
#region InitializeDataForBookings
/// <summary>
/// Method for initialize data bookings.
/// </summary>
private void InitializeDataForBookings()
{
...
}
#endregion InitializeDataForBookings
#region Property Changed Event
/// <summary>
/// Invoke method when property changed
/// </summary>
/// <param name="propertyName">property name</param>
private void RaiseOnPropertyChanged(string propertyName)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}