Create a Roster Scheduler View in Less Than 20 Minutes in Xamarin.Forms | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (178).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (223)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (225)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (936)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (156)Chart  (138)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (67)Development  (650)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (6)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (12)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (607)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Create a Roster Scheduler View in Less Than 20 Minutes in Xamarin.Forms

Create a Roster Scheduler View in Less Than 20 Minutes in Xamarin.Forms

“If you fail to plan, you are planning to fail.”

                                                                          –  (reportedly by) Benjamin Franklin

To plan for a project, you need to know the availability of the employees required to implement it. The Syncfusion Scheduler control has all the functionalities you need, helping you develop a Xamarin application to create a roster schedule view.

In this blog, we are going to learn how to create a roster scheduler view using Xamarin.Forms Scheduler (SfSchedule) in a nutshell. It will allow you to track the availability of employees in any given time period. The following screenshot will be output of the application we are going to develop.

Roster scheduler View
Roster scheduler View

Creating a roster scheduler

Step 1: Following the getting started UG documentation, create a Xamarin application and then a SfSchedule control in it.

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

  1. Set ScheduleView property as TimelineView.
  2. Enable resource view by setting the ShowResourceView property to True.
  3. Set ResourceViewMode to Absolute.
  4. Set schedule TimeInterval to 1440 (total minutes in a day) to make one slot for a day in TimelineView.
<syncfusion:SfSchedule x:Name="schedule"

Step 3: Customize the appearance of the appointment using AppointmentTemplate, as explained in the following code example.

                            <RowDefinition Height="0.5*"/>
                            <RowDefinition Height="0.5*"/>
                        <Label TextColor="Black" FontAttributes="Bold" Text="{Binding Subject}" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                        <BoxView Color="{Binding Color}" CornerRadius="5" HeightRequest="10" WidthRequest="10" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" />

Step 4: In TimelineViewSettings, set TimeRulerSize to 0 to hide the time ruler, and DaysCount to 7 to show the timeline for a week.

TimelineViewSettings timelineViewSettings = new TimelineViewSettings();
timelineViewSettings.TimeRulerSize = 0;
timelineViewSettings.DaysCount = 7;
this.schedule.TimelineViewSettings = timelineViewSettings;

Note: Default timeline view starts from the current date. If you want to start the timeline from a particular day, you can set the MoveToDate property of a schedule with your desired one.

Step 5: Customize the ViewHeader date format as required using the DateFormat property in TimelineLabelSettings.

TimelineLabelSettings labelSettings = new TimelineLabelSettings();
labelSettings.DateFormat = Device.RuntimePlatform == "UWP" ? "%d ddd" : "dd EEE";
timelineViewSettings.LabelSettings = labelSettings;
this.schedule.TimelineViewSettings = timelineViewSettings;


The sample can be downloaded from this GitHub location.


I hope you now have a clear idea of how to create a roster schedule view using Syncfusion’s Scheduler control. The features in this control will reduce your workforce and save time.

If you are an existing Syncfusion user, please download the latest version from the License and Downloads page and try the new features for yourself. Also, our NuGet packages are available on

If you aren’t a customer yet, you can try our 30-day free trial to check out these features. Also, try our other samples from this GitHub location.

Feel free to share your feedback or questions in the comments section below. You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you.


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Syncfusion Ad