SYNCFUSION BLOG

What’s New in 2018 Volume 2: Schedule Control in Xamarin.Forms

The Schedule component for Xamarin.Forms has been made highly customizable for the 2018 Volume 2 release, with support to completely customize its appearance and behavior. We have also added several key features such as drag and drop support, agenda view support, time zone support, other minor enhancements, and fixed several bugs. 

This blog post will showcase the new features added to the Xamarin.Forms schedule component in 2018 Volume 2.

Appointment drag and drop 

An appointment can be rescheduled using drag and drop operations. To perform drag-and-drop operations within Schedule application you must enable `AllowAppointmentDrag` as shown in the below code.

<schedule:SfSchedule x:Name="schedule" ScheduleView="WorkWeekView"
                     AllowAppointmentDrag="True">
</schedule:SfSchedule>

You can handle the DragStart, DragOver, and DragEnd events, and arguments of these events, to easily facilitate drag-and-drop operations.

Time zones

Appointments can be created in various time zones and displayed in a specified time zone. Schedule appointments can also be rendered by recalculating the start and end time values based on the given time zone. 

<schedule:SfSchedule x:Name="schedule" ScheduleView="WeekView"
                     TimeZone="Canada Central Standard Time" >
</schedule:SfSchedule>

After rescheduling an appointment using drag and drop, its start and end times will be updated based on the start time zone and end time zone.


Agenda view

An agenda view displays selected appointments in a list below the month view. To enable agenda view in the schedule month view, set `ShowAgendaView` to true as shown in the following code. 

<schedule:SfSchedule x:Name="schedule" ScheduleView="MonthView" >
     <schedule:SfSchedule.MonthViewSettings>
                <schedule:MonthViewSettings ShowAgendaView="True"/>
     </schedule:SfSchedule.MonthViewSettings>
</schedule:SfSchedule>

You can also customize each listed appointment by using the AgendaViewStyle and AgendaItemTemplate properties.


Month cell templates

Month cells can be customized using data templates and template selectors. A template selector lets you choose a different data template for each month cell, customizing the appearance of a particular month cell based on certain conditions.

<ContentPage.Resources>
     <ResourceDictionary>
           <samplelocal:MonthCellDataTemplateSelector x:Key="monthCellDataTemplateSelector" />
     </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.Content>
     <schedule:SfSchedule x:Name="schedule"  ScheduleView="MonthView" >
          <schedule:SfSchedule.MonthViewSettings>
               <schedule:MonthViewSettings x:Name="monthViewSettings"
			MonthCellTemplate="{StaticResource monthCellDataTemplateSelector}" />
                </schedule:SfSchedule.MonthViewSettings>
     </schedule:SfSchedule>
</ContentPage.Content>

Data Template Selector

public class MonthCellDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate MonthAppointmentTemplate { get; set; }
    public DataTemplate MonthCellDatesTemplate { get; set; }

    public MonthCellDataTemplateSelector()
    {
        MonthAppointmentTemplate = new DataTemplate(typeof(MonthAppointmentTemplate));
        MonthCellDatesTemplate = new DataTemplate(typeof(MonthCellDatesTemplate));
    }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
            var appointments = (IList)(item as MonthCellItem).Appointments;

            if (appointments != null)
            {
                return MonthAppointmentTemplate;
            }

            return MonthCellDatesTemplate;       
    }
}


Partial hours

You can set partial working hours, start hours, and end hours according to your requirements using view settings. With 2018 Volume 2, you can also customize the minutes within working hours by setting a double value which will be converted to a time. If you don’t want to set minutes, don’t specify the decimal point values. The value will be calculated as an hour automatically for the WorkStartHour, WorkEndHour, StartHour, and EndHour properties.

<schedule:SfSchedule x:Name="schedule" ScheduleView="WeekView">
    <schedule:SfSchedule.WeekViewSettings>
        <!--WorkStartHour="11.5" is 11h 30m, StartHour="7.5" is 7h 30m-->
        <schedule:WeekViewSettings WorkStartHour="11.5" WorkEndHour="17.5" 
                                   StartHour="7.5" EndHour="22.5"/>
    </schedule:SfSchedule.WeekViewSettings>
</schedule:SfSchedule>

We hope that you will like these new features and we look forward to you trying them out in the 2018 Volume 2 release. You can find the 2018 Volume 2 Xamarin install download link here. Please feel free to leave your feedback in the comments section below.

Leave a comment

Loading