How to create a roster schedule view using Xamarin.Forms Schedule (SfSchedule)

1 min read

You can create a roster schedule view using SfSchedule in Xamarin.Forms. A roster schedule is a schedule that provides information about a list of employees and associated information for a given time period.

This is the Landscape view of roster schedule application.

Step 1

Enable resource view by setting the ShowResourceView property of schedule, use Timeline view with Absolute ResourceViewMode and set schedule TimeInterval as 1440(24 hours) to make one slot for a day in TimelineView.

<syncfusion:SfSchedule x:Name="schedule"
                           ScheduleView="TimelineView"
                           ShowResourceView="True"
                           ResourceViewMode="Absolute"
                           TimeInterval="1440">

Step 2

Customize the appearance of appointment using AppointmentTemplate.

<syncfusion:SfSchedule.AppointmentTemplate>
        <DataTemplate>
               <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.5*"/>
                            <RowDefinition Height="0.5*"/>
                        </Grid.RowDefinitions>
                        <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" />
             </Grid>
       </DataTemplate>
</syncfusion:SfSchedule.AppointmentTemplate>

Step 3

Set TimeRuler size to 0 to hide the time ruler and DaysCount as 7 to show Timeline for a week in TimelineViewSettings. As the default Timeline view starts from the current date, if you want to start Timeline from a particular day, you can set the MoveToDate property of schedule.

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

Step 4

Customize the ViewHeader date format as required using the DateFormat property of TimelineLabelSettings.

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

Output

This is the potrait view of roster schedule application.

View sample in GitHub

Did you find this information helpful?

Yes

Comments (0)

How to create a roster schedule view using Xamarin.Forms Schedule (SfSchedule)

Access denied