How to customize the resource appearance using ResourceHeaderTemplate in WPF Scheduler (Calendar)
You can customize the appearance of a resource by using the ResourceHeaderTemplate property in WPF SfScheduler.
C#
Create a custom class Employee with mandatory fields Name, Id, BackgroundBrush, ForegroundBrush and ImageSource.
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 ViewModel class and add the appointment details.
public class SchedulerViewModel : NotificationObject
{
private ScheduleAppointmentCollection events;
private ObservableCollection<object> resources;
public SchedulerViewModel()
{
CreateResources();
CreateResourceAppointments();
}
private void CreateResourceAppointments()
{
Events = new ScheduleAppointmentCollection();
Random randomTime = new Random();
List<Point> randomTimeCollection = this.GettingTimeRanges();
var resurceCollection = this.Resources as ObservableCollection<object>;
this.eventNames = new List<string>();
this.eventNames.Add("General Meeting");
this.eventNames.Add("Plan Execution");
for (int additionalAppointmentIndex = 0; additionalAppointmentIndex < 4; additionalAppointmentIndex++)
{
DateTime dateTime1 = new DateTime(date.Year, date.Month, date.Day, randomTime.Next(0, 23), 0, 0);
Events.Add(new ScheduleAppointment()
{
StartTime = dateTime1,
EndTime = dateTime1.AddHours(2),
Subject = this.eventNames[randomTime.Next(4)],
ResourceIdCollection = new ObservableCollection<object>() { scheduleResource.Id },
AppointmentBackground = scheduleResource.BackgroundBrush,
});
}
}
private void CreateResources()
{
Random random = new Random();
this.Resources = new ObservableCollection<object>();
var nameCollection = new List<string>();
nameCollection.Add("Sophia");
nameCollection.Add("Zoey Addison");
for (int i = 0; i < 4; i++)
{
Employee employee = new Employee();
employee.Name = nameCollection[i];
employee.Id = i.ToString();
employee.ImageSource = "People_Circle" + i.ToString() + ".png";
Resources.Add(employee);
}
}
}
XAML
Bind the appointments to a schedule by using the Scheduler.ItemsSource property. You can add resources of Employee collection that can be assigned to the scheduler by using the ResourceCollection property and bind the resources of the DataTemplate to the ResourceHeaderTemplate.
<Window.DataContext>
<local:SchedulerViewModel/>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="DayViewResourceTemplate">
<Grid Background="Transparent">
<Border BorderThickness="0.3,0.3,0,0.3" BorderBrush="Gray" >
<StackPanel VerticalAlignment="Center" Orientation="Vertical">
<Border CornerRadius="36" Height="72" Width="72" BorderThickness="4" BorderBrush="{Binding BackgroundBrush}">
<Border CornerRadius="36" Height="64" Width="64" BorderThickness="4" BorderBrush="White">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="55"
Height="55" Source="{Binding ImageSource}"/>
</Border>
</Border>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15"
Foreground="Black" Text="{Binding Name}" />
</StackPanel>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<syncfusion:SfScheduler x:Name="Schedule"
ViewType="Timeline"
ResourceGroupType="Resource"
ResourceCollection="{Binding Resources}"
ResourceHeaderTemplate="{StaticResource DayViewResourceTemplate}"
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>
</Grid>
</Window>
