Articles in this section
Category / Section

How to create CustomGrouping in SfSchedule?

2 mins read

CustomGrouping is used to group the schedule appointments based on the resources you select. By using CustomGrouping you can add the same appointment for multiple resources simultaneously. This article explains on how to group the appointments based on the resource.

Creating CustomGrouping

  1. Create a WinRT application and add the SfSchedule control to it. Add resources in the ScheduleResourceTypeCollection and create buttons to change the resource type dynamically by using the button click event as illustrated in the following code example.


<Grid Background="GhostWhite">
<RowDefinition Height="auto" ></RowDefinition>
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center">
<Button x:Name="television" Content="Television" Click="Button_Click_1" Height="35"  Margin="5" Foreground="White" Background="#FF25A0DA" Width="200" HorizontalAlignment="Center" ></Button>
<Button x:Name="programs" Width="200" Click="Button_Click_1" Height="35"  Margin="5" Foreground="White" Background="#FF25A0DA" Content="Programs"  HorizontalAlignment="Center"/>
<syncfusion:SfSchedule Grid.Column="0" ScheduleType="Week" DayHeaderOrder="OrderByDate"
IntervalHeight="30" Background="WhiteSmoke" Appointments="{Binding FilterColl}" Resource="TV" CurrentDateBackground="#63A028"  HeaderBackground="#FF25A0DA"    x:Name="schedule"  Grid.Row="1" >
<syncfusion:ResourceType   TypeName="TV" >
<syncfusion:Resource ResourceName="TV1" DisplayName="StarSports" />
<syncfusion:Resource ResourceName="TV2" DisplayName="ESPN"/>
<syncfusion:Resource ResourceName="TV3" DisplayName="TenSports"/>
<syncfusion:ResourceType TypeName="programs">
<syncfusion:Resource ResourceName="FootBall" DisplayName="FootBall"/>
<syncfusion:Resource ResourceName="Cricket" DisplayName="Cricket"/>
<syncfusion:Resource ResourceName="News" DisplayName="News"/>

In the above code, two types of resources are used.


  • StarSports
  • ESPN
  • TenSports


  • FootBall
  • Cricket
  • News

C:\Users\ApoorvahR\Desktop\Note.pngNote: In the above code example the value of DayHeaderOrder property is OrderByDate that is used to display multiple resources in each day. You can also set OrderByResouce value for the same property where each Resource displays the schedule appointments in all the week days.

  1. Create appointments collections and group the appointments by using the GetFilterCollection method as illustrated in the following code example.


public sealed partial class MainPage : Page
private ObservableCollection<DateTime> datecoll = new ObservableCollection<DateTime>();
private ObservableCollection<DateTime> dateselected = new ObservableCollection<DateTime>();
public ScheduleAppointmentCollection FilterColl { get; set; }
Random random;
public MainPage()
random = new Random();
for (int i = -20; i < 20; i += 2)
for (int j = -7; j < 7; j++)
this.FilterColl = GetFilterCollection();
this.DataContext = this;
private ScheduleAppointmentCollection GetFilterCollection()
string[] football = new string[] { "USA vs IRN ", "RUS vs ARG", "POR vs SWI", "BEL vs ARG", "USA vs RUS", "IRN vs POR", "CRO vs MEX", "JPN vs ITA", "COL vs URU" };
string[] cricket = new string[] { "IND vs PAk", "AUS vs SA", "SRI vs WI", "SA vs IND", "ZIM vs PAK", "SRI vs AUS" };
string[] news = new string[] { "Cricket news", "Football news", "Hockey news", "Tennis news", "news of Athletics", "Golf news", "Kabaddi news", "VolleyBall news" };
string[] pgms = new string[] { "FootBall", "Cricket", "News" };
ScheduleAppointmentCollection app = new ScheduleAppointmentCollection();
for (int dc = 0; dc < datecoll.Count - 1; dc++)
DateTime date = datecoll[dc];
for (int sd = 0; sd < dateselected.Count - 1; sd++)
if (date == dateselected[sd])
date = date.AddDays(1);
ScheduleAppointment app1 = new ScheduleAppointment() { StartTime = date };
app1.ResourceCollection.Add(new Resource() { ResourceName = "TV" + random.Next(1, 4), TypeName = "TV" });
app1.ResourceCollection.Add(new Resource() { ResourceName = pgms[random.Next(0, 3)], TypeName = "programs" });
if (app1.ResourceCollection[1].ResourceName.Equals("FootBall"))
app1.Subject = football[random.Next(0, football.Length)];
app1.EndTime = date.AddHours(1);
else if (app1.ResourceCollection[1].ResourceName.Equals("Cricket"))
app1.Subject = cricket[random.Next(0, cricket.Length)];
app1.EndTime = date.AddHours(1);
app1.Subject = news[random.Next(0, news.Length)];
app1.EndTime = date.AddHours(1);
app1.AppointmentBackground = new SolidColorBrush(Colors.DimGray);
return app;
private void Button_Click_1(object sender, RoutedEventArgs e)
string str = (sender as Button).Content.ToString();
if (str.Equals("Television"))
programs.IsEnabled = true;
this.schedule.Resource = "TV";
television.IsEnabled = false;
television.IsEnabled = true;
this.schedule.Resource = "programs";
programs.IsEnabled = false;

C:\Users\ApoorvahR\Desktop\Note.pngNote: In the above code example, in GetFilterCollection method both the resources, TV and Program are added in a same appointment by using the ResourceCollection property. When the resource of the schedule is changed to any other type, the same appointment is used to display.

  1. When the resource type is Programs, then the appointments gets filtered based on the resource name as in the above code example.

C:\Users\ApoorvahR\Desktop\Note.pngNote: For example when the resource name is FootBall, then the appointments are related on football.

  1. The default resource type is Television, where each resource has the appointments of all the three programs, such as football, cricket and news. When you change the resource type as Programs, then the appointments are filtered and each resource has the appointments related to the same resource name.

The following screenshots display the schedule appointments based on the resource type.

Figure 1: Appointments based on resource type of Television (in week view)

Figure 2: Filtered Appointments in the resource type of Programs (in week view)

Sample Link

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment