How to add multiple resources to WinUI Scheduler (Calendar)
In the WinUI Scheduler, add the multiple resources with the ResourceGroupType support.
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; }
}
C#
Create a collection of Resources for the Scheduler.
private void CreateResources()
{
Random random = new Random();
this.Resources = new ObservableCollection<object>();
for (int i = 0; i < 4; i++)
{
Employee employee = new Employee();
employee.Name = nameCollection[i];
employee.ForegroundBrush = new SolidColorBrush(Colors.Black);
if (i == 0)
employee.BackgroundBrush = new SolidColorBrush(Color.FromArgb(255, 253, 183, 165));
else if (i == 1)
employee.BackgroundBrush = new SolidColorBrush(Color.FromArgb(255, 45, 153, 255));
else if (i == 2)
employee.BackgroundBrush = new SolidColorBrush(Color.FromArgb(255, 198, 237, 115));
else
employee.BackgroundBrush = ColorCollection[random.Next(3)];
employee.Id = i.ToString();
Resources.Add(employee);
}
}
C#
Create a collection of Events for the Resources.
private void CreateResourceAppointments()
{
Random random = new Random();
Events = new ScheduleAppointmentCollection();
var resourceCollection = this.Resources as ObservableCollection<object>;
for (int resource = 0; resource < resourceCollection.Count; resource++)
{
var scheduleResource = resourceCollection[resource] as Employee;
Events.Add(new ScheduleAppointment()
{
StartTime = new DateTime(2021, 07, 05, 10, 0, 0),
EndTime = new DateTime(2021, 07, 05, 12, 0, 0),
Subject = this.eventNames[random.Next(4)],
ResourceIdCollection = new ObservableCollection<object>() { scheduleResource.Id },
AppointmentBackground = scheduleResource.BackgroundBrush,
Foreground = new SolidColorBrush(Colors.Black)
});
Events.Add(new ScheduleAppointment()
{
StartTime = new DateTime(2021, 07, 06, 10, 0, 0),
EndTime = new DateTime(2021, 07, 06, 12, 0, 0),
Subject = this.eventNames[random.Next(4)],
ResourceIdCollection = new ObservableCollection<object>() { scheduleResource.Id },
AppointmentBackground = scheduleResource.BackgroundBrush,
Foreground = new SolidColorBrush(Colors.Black)
});
Events.Add(new ScheduleAppointment()
{
StartTime = new DateTime(2021, 07, 07, 12, 0, 0),
EndTime = new DateTime(2021, 07, 07, 13, 0, 0),
Subject = this.eventNames[random.Next(4)],
ResourceIdCollection = new ObservableCollection<object>() { scheduleResource.Id },
AppointmentBackground = scheduleResource.BackgroundBrush,
Foreground = new SolidColorBrush(Colors.Black)
});
}
}
XAML
Bind the appointments from the view model to a schedule by using the ItemsSource property. Add the custom resources of the Employee collection from the view model, and it can be assigned to the scheduler by using the ResourceCollection property. Set the ResourceGroupType to Resource or Date.
<Page.DataContext>
<local:SchedulerViewModel/>
</Page.DataContext>
<Grid>
<syncfusion:SfScheduler x:Name="Schedule"
ViewType="{Binding ElementName=schedulerViewTypeComboBox, Path=SelectedValue,Mode=TwoWay}"
ResourceGroupType="{Binding ElementName=resourceGroupTypeComboBox, Path=SelectedValue,Mode=TwoWay}"
ResourceCollection="{Binding Resources}"
ItemsSource="{Binding Events}">
<syncfusion:SfScheduler.ResourceMapping>
<syncfusion:ResourceMapping Id="Id"
Name="Name"
Background="BackgroundBrush"
Foreground="ForegroundBrush"/>
</syncfusion:SfScheduler.ResourceMapping>
<syncfusion:SfScheduler.TimelineViewSettings>
<syncfusion:TimelineViewSettings ResourceHeaderSize="100"/>
</syncfusion:SfScheduler.TimelineViewSettings>
</syncfusion:SfScheduler>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,5,10,0">
<ComboBox x:Name="schedulerViewTypeComboBox"
SelectedIndex="1" Width="180" Height="30" Margin="0,0,5,0"/>
<ComboBox x:Name="resourceGroupTypeComboBox"
SelectedIndex="1" Width="100" Height="30"/>
</StackPanel>
</Grid>
Take a moment to pursue the documentation. You can also find the options available for the resources view in Scheduler.
