How to Create a Roster Scheduler View in Less Than 20 Minutes in WPF
Tags: csharp, dotnet, wpf, productivity
Published: 2020-11-10 11:15:01

---
title: How to Create a Roster Scheduler View in Less Than 20 Minutes in WPF
published: true
date: 2020-11-09 10:00:39 UTC
tags: csharp, dotnet, wpf, productivity
canonical_url: https://www.syncfusion.com/blogs/post/how-to-create-a-roster-scheduler-view-in-less-than-20-minutes-in-wpf.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/How-to-Create-a-Roster-Scheduler-View-in-Less-Than-20-Minutes-in-WPF-672x372.png
---

**“A man who does not think and plan long ahead will find trouble at his door.”**  
― Confucius, Chinese philosopher

To plan for a project perfectly, we should know the availability of the employees needed to implement it. The[ Syncfusion Scheduler control](https://www.syncfusion.com/wpf-ui-controls/scheduler) provides all the functionalities we need, helping us develop a WPF application to create a roster scheduler view.

In this blog, we are going to learn how to quickly create a roster scheduler view using the WPF Scheduler control. It will allow you to track the availability of employees in any given time period. The following screenshot shows the output of the application we are going to develop.

![Roster Scheduler View in WPF](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Roster-Scheduler-View-in-WPF.png)<figcaption>Roster Scheduler View in WPF</figcaption>

## Creating a roster scheduler

Follow these steps to create a roster scheduler view in your WPF application:

**Step 1:**  Follow the getting started [documentation](https://help.syncfusion.com/wpf/scheduler/getting-started) to create a WPF application and add the **SfScheduler** control to it.

**Step 2:**  Make the following property changes in the **add** instance of SfScheduler:

- Set the Scheduler [ViewType ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ViewType)property as  **Timeline**.
- Add the resource data and bind it to the Scheduler using the [ResourceCollection](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ResourceCollection) property.
- Enable the resource view by setting the [ResourceGroupType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ResourceGroupType) property as **Resource**.

Refer to the following code example.

```html
<syncfusion:SfScheduler 
    ViewType="Timeline" 
    ResourceGroupType="Resource"
    ItemsSource="{Binding Events}"
    ResourceCollection="{Binding Employees}">
```

**Step 3:**  Customize the appearance of the appointments by using [AppointmentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.ViewSettingsBase.html#Syncfusion_UI_Xaml_Scheduler_ViewSettingsBase_AppointmentTemplate), as explained in the following code example.

```html
<syncfusion:SfScheduler.TimelineViewSettings>
   <syncfusion:TimelineViewSettings>
        <syncfusion:TimelineViewSettings.AppointmentTemplate>
            <DataTemplate>
                 <Grid>
                     <Label Foreground="Black" FontWeight="Bold" Content="{Binding Subject}" Grid.Row="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
                     <Border Background="{Binding AppointmentBackground}" CornerRadius="5" Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" />
                 </Grid>
            </DataTemplate>
        </syncfusion:TimelineViewSettings.AppointmentTemplate>
   </syncfusion:TimelineViewSettings>
 </syncfusion:SfScheduler.TimelineViewSettings>
```

**Step 4:** Currently there is no direct support for a timeline month view in the WPF Scheduler, but you can achieve it by following these steps:

- In [TimelineViewSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_TimelineViewSettings), set the [DaysCount ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.TimeSlotViewSettings.html#Syncfusion_UI_Xaml_Scheduler_TimeSlotViewSettings_DaysCount)property as the total number of days in the current visible month based on the visible date range in the [ViewChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ViewChanged) event.
- The default timeline view starts from the current date. You can start the timeline with the start day of the current visible month by using the [DisplayDate ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_DisplayDate)property of the Scheduler.

Refer to the following code example.

```csharp
scheduler.TimelineViewSettings.DaysCount = DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month);
scheduler.DisplayDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

scheduler.ViewChanged += OnSchedulerViewChanged;

…
private void OnSchedulerViewChanged(object sender, ViewChangedEventArgs e)
{
     var date = e.NewValue.ActualStartDate.AddDays(scheduler.TimelineViewSettings.DaysCount / 2);
     scheduler.TimelineViewSettings.DaysCount = DateTime.DaysInMonth(date.Year, date.Month);
     scheduler.DisplayDate = new DateTime(date.Year, date.Month, 1);
}
```

**Step 5:**  Make the following property changes in [**TimelineViewSettings**](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfSchedule.XForms.TimelineViewSettings.html):

- Set [TimeRulerSize ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.TimeSlotViewSettings.html#Syncfusion_UI_Xaml_Scheduler_TimeSlotViewSettings_TimeRulerSize)to 0 to hide the time ruler.
- Set the Scheduler [TimeInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.TimeSlotViewSettings.html#Syncfusion_UI_Xaml_Scheduler_TimeSlotViewSettings_TimeInterval) to 24 (total hours per day) to make one slot per day in **TimelineView**.
- Using the [ViewHeaderDateFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.TimeSlotViewSettings.html#Syncfusion_UI_Xaml_Scheduler_TimeSlotViewSettings_ViewHeaderDateFormat) property, customize the view header date format as required.
- The default visible resource count is 3, but you can customize it by using the [VisibleResourceCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.ViewSettingsBase.html#Syncfusion_UI_Xaml_Scheduler_ViewSettingsBase_VisibleResourceCount) property.

Refer to the following code example.

```csharp
scheduler.TimelineViewSettings.TimeRulerSize = 0;
scheduler.TimelineViewSettings.TimeInterval = new TimeSpan(24, 0, 0);
scheduler.TimelineViewSettings.ViewHeaderDateFormat = "dd";
scheduler.TimelineViewSettings.VisibleResourceCount = 5;
```

## Output

![Output](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Output.png)<figcaption>Output</figcaption>

**GitHub Reference:** The sample can be downloaded from this [GitHub](https://github.com/SyncfusionExamples/Create-a-roster-scheduler-view-in-wpf) location.

## Conclusion

I hope you now have a clear idea of how to create a roster scheduler view using [Syncfusion’s WPF Scheduler control](https://www.syncfusion.com/wpf-ui-controls/scheduler). The features in this control help you to reduce your workload and save time while allocating employees for a particular task. This control is also available in our [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-scheduler), [UWP](https://www.syncfusion.com/uwp-ui-controls/scheduler), [WinForms](https://www.syncfusion.com/winforms-ui-controls/scheduler), [Blazor](https://www.syncfusion.com/blazor-components/blazor-scheduler), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/scheduler), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/scheduler), and [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/scheduler)), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-scheduler), [Angular](https://www.syncfusion.com/angular-ui-components/angular-scheduler), [React](https://www.syncfusion.com/react-ui-components/react-scheduler), and [Vue](https://www.syncfusion.com/vue-ui-components/vue-scheduler) platforms.

If you are currently a Syncfusion user, please download the latest version from the [License and Downloads](https://www.syncfusion.com/account/downloads) page and try the new features for yourself. Also, our NuGet packages are available on [NuGet.org](https://www.nuget.org/).

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these features. Also, try our other samples from this [GitHub](https://github.com/SyncfusionExamples) location.

Feel free to share your feedback or questions in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/account/login), or [feedback portal](https://www.syncfusion.com/feedback/). We are always happy to assist you.