How to create a roster schedule view using WinUI Scheduler (Calendar)
Create a roster schedule view using the Scheduler in the WinUI. A roster scheduler is a schedule that provides information about a list of employees and the availability of employees.
C#
Create a custom class Employee with the mandatory fields “Name, Id, BackgroundBrush, ForegroundBrush, and ImageSource” for the Resource.
public class Employee
{
public string Name { get; set; }
public object Id { get; set; }
public Brush BackgroundBrush { get; set; }
public Brush ForegroundBrush { get; set; }
public string ImageSource { get; set; }
}
C#
Create a collection of Resources for the Scheduler.
private void CreateResources()
{
Random random = new Random();
for (int i = 0; i < 9; i++)
{
Employees.Add(new Employee()
{
Name = nameCollection[i],
BackgroundBrush = this.ColorCollection[random.Next(8)],
ID = "560" + i.ToString(),
ImageSource = "People_Circle" + i.ToString() + ".png"
});
}
}
C#
Create a collection of Events for the Resources.
private void CreateResourceAppointments()
{
Random random = new Random();
DateTime date;
DateTime dateFrom = DateTime.Now.AddYears(-1).AddDays(-20);
DateTime dateTo = DateTime.Now.AddYears(1).AddDays(20);
foreach (var resource in Employees)
{
for (date = dateFrom; date < dateTo; date = date.AddDays(1))
{
ScheduleAppointment workDetails = new ScheduleAppointment();
workDetails.StartTime = new DateTime(date.Year, date.Month, date.Day, 0, 0, 0);
workDetails.EndTime = workDetails.StartTime.AddHours(1);
workDetails.Subject = this.currentDayMeetings[random.Next(6)];
workDetails.AppointmentBackground = workDetails.Subject == "Work" ? new SolidColorBrush(Microsoft.UI.Colors.Green) : (workDetails.Subject == "Off" ? new SolidColorBrush(Microsoft.UI.Colors.Gray) : new SolidColorBrush(Microsoft.UI.Colors.Red));
workDetails.IsAllDay = true;
workDetails.ResourceIdCollection = new ObservableCollection<object>
{
(resource as Employee).ID
};
this.Events.Add(workDetails);
}
}
}
XAML
Set scheduler ViewType property as TimelineMonth. Add the resources data, and bind it to the scheduler using ResourceCollection property. Enable resource view by setting the ResourceGroupType property as Resource.
<Page.DataContext>
<local:SchedulerViewModel/>
</Page.DataContext>
<scheduler:SfScheduler
x:Name="Scheduler"
ViewType="TimelineMonth"
ResourceGroupType="Resource"
ItemsSource="{Binding Events}"
ResourceCollection="{Binding Employees}">
<scheduler:SfScheduler.ResourceMapping>
<scheduler:ResourceMapping
Id="ID"
Name="Name"
Background="BackgroundBrush"
Foreground="ForegroundBrush"/>
</scheduler:SfScheduler.ResourceMapping>
</scheduler:SfScheduler>
Customize the appearance of the appointment using the AppointmentTemplate. It allows to track the availability of employees in any given time period.
<scheduler:TimelineViewSettings.AppointmentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Foreground="Black" VerticalAlignment="Bottom" Height="50" HorizontalAlignment="Center" FontWeight="Bold" Text="{Binding Subject}"/>
<Border Background="{Binding AppointmentBackground}" CornerRadius="5" Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</scheduler:TimelineViewSettings.AppointmentTemplate>
Set ResourceHeaderSize to 100 to customize the resource header size. Default visible resource count is 3, customize it by using VisibleResourceCount property.
<scheduler:SfScheduler.TimelineViewSettings> <scheduler:TimelineViewSettings ViewHeaderDateFormat="dd" VisibleResourceCount="5" TimelineAppointmentHeight="120" > </ scheduler:SfScheduler.TimelineViewSettings >
Take a moment to pursue the documentation. You can also find the options available for the resources view in Scheduler.
