We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a CustomGrouping in the SfSchedule?

Platform: WPF |
Control: SfSchedule
Tags: sfschedule

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

Creating CustomGrouping

  1. Create a WPF 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 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

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


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


public partial class MainWindow : Window
        private ObservableCollection<DateTime> datecoll = new ObservableCollection<DateTime>();
        private ObservableCollection<DateTime> dateselected = new ObservableCollection<DateTime>();
        public ScheduleAppointmentCollection FilterColl { get; set; }
       Random random;
        public MainWindow()
            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;



In the above code example, in GetFilterCollection method both the resources, Television and Programs are added in a same appointment by using the Resource 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 are filtered based on the resource name as in the above code example.

    For an example, when the resource name is FootBall, then the appointments are related to 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 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.

Appointments based on resource type of television

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


Filtered appointments in the resource type of programs

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

Sample Link

ViewSample in GitHub

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile