How to customize the resource appearance using ResourceHeaderTemplate in WinUI Scheduler (Calendar)
Customize the appearance of a resource by using the ResourceHeaderTemplate property in the WinUI Scheduler.
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();
this.Resources = new ObservableCollection<object>();
for (int i = 0; i < 4; i++)
{
Employee employee = new Employee();
employee.Name = nameCollection[i];
employee.ForegroundBrush = new SolidColorBrush(Color.FromArgb(255, 253, 185, 222));
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();
employee.ImageSource = "People_Circle" + i.ToString() + ".png";
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, 05, 12, 0, 0),
Subject = this.eventNames[random.Next(4)],
ResourceIdCollection = new ObservableCollection<object>() { scheduleResource.Id },
AppointmentBackground = scheduleResource.BackgroundBrush,
Foreground = new SolidColorBrush(Colors.Black)
});
}
}
XAML
DataTemplate are defined to the ResourceHeaderTemplate to display in the view.
<DataTemplate x:Key="ResourceTemplate">
<Grid Background="Transparent">
<Border Background="Transparent" >
<StackPanel VerticalAlignment="Center" Orientation="Vertical">
<Border CornerRadius="36" Height="72" Width="72" BorderThickness="4" BorderBrush="{Binding Data.BackgroundBrush}">
<Border CornerRadius="36" Height="64" Width="64" BorderThickness="4" BorderBrush="White">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="55"
Height="55" Source="{Binding Data.ImageSource}" />
</Border>
</Border>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15"
Foreground="Black" Text="{Binding Data.Name}" />
</StackPanel>
</Border>
</Grid>
</DataTemplate>
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 that can be assigned to the scheduler by using the ResourceCollection property. And then, bind the DataTemplate declared for the ResourceHeaderTemplate.
<Page.DataContext>
<local:SchedulerViewModel/>
</Page.DataContext>
<syncfusion:SfScheduler x:Name="Schedule"
ViewType="TimelineWeek"
ResourceGroupType="Resource"
ResourceCollection="{Binding Resources}"
ResourceHeaderTemplate="{StaticResource ResourceTemplate}"
ItemsSource="{Binding Events}"
HeaderHeight="32">
<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>
Take a moment to pursue the documentation. You can also find the options like customizing the resource view.
