Add Scheduling Capabilities to Xamarin.Forms apps with Syncfusion Scheduler

Prabakaran Ramasamy

Guest post contributed by Prabakaran Ramasamy. Prabakaran is a Product Manager for Data Visualization products at Syncfusion. He has been a .NET developer since 2012, working on the custom control development for Microsoft technologies.

Syncfusion Scheduler for Xamarin.Forms

A lot of line-of-business mobile applications have a requirement for letting the end-users view and manage appointment schedules. A simple appointment management interface can be built using the calendar component. However, this approach only provides a basic appointment scheduling experience out of the box. A considerable amount of customization work would be needed to provide a full-fledged experience with advanced features. Such as recurrence, day/week/work-week/month views, an agenda view, drag-and-drop editing, and more. The Scheduler control from Syncfusion provides all these features out of the box! And it only takes a few lines of code to integrate these features into your Xamarin.Forms application.

Integrating the Scheduler in a Xamarin.Forms application

  1. Create a new Xamarin.Forms project or open an existing one in Visual Studio or Visual Studio for Mac.
  2. Open the Manage NuGet Packages for Solution window. Search for the Syncfusion.Xamarin.SfSchedule package. Install it in all Xamarin.Forms projects.
  3. Note: This package must be installed in all the projects separately by using the Add Packages option in Visual Studio for Mac.

  4. We have added the reference of the Syncfusion Scheduler control, so now let’s create an instance of SfSchedule and add it in your visual tree.
  5. Add the XML namespace of the SfSchedule control:

    xmlns:syncfusion="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"

    Initialize the SfSchedule using the declared XML namespace:

    <?xml version="1.0" encoding="utf-8" ?> 
    
    <ContentPage 
    
        x:Class="ScheduleSample.MainPage" 
    
        xmlns="http://xamarin.com/schemas/2014/forms" 
    
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    
        xmlns:local="clr-namespace:ScheduleSample" 
    
        xmlns:syncfusion="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"> 
    
        <syncfusion:SfSchedule/>  
    
    </ContentPage> 
  6. To launch the scheduler in iOS, call the SfScheduleRenderer.Init() method in the FinishedLaunching overridden method as demonstrated below.
  7. public override bool FinishedLaunching(UIApplication app, NSDictionary options) 
    
    { 
    
        global::Xamarin.Forms.Forms.Init(); 
    
        SfScheduleRenderer.Init(); 
    
        LoadApplication(new App()); 
    
        return base.FinishedLaunching(app, options); 
    
    } 
    

That’s it! We’ve configured the Syncfusion Scheduler control in a Xamarin.Forms application in only a few minutes. Explore the details on how to get started with the Scheduler control in Syncfusion’s documentation.

Scheduling appointments in the Xamarin.Forms Scheduler

Scheduling an appointment is easy in the Scheduler control. Use the predefined model to create a schedule or provide your own custom object and map it to the Scheduler.

Using a predefined model to schedule an appointment

The class ScheduleAppointment provides various options for configuring an appointment. Such as start date, end date, background color, subject, location, notes, and more. To schedule an appointment with this predefined model, create an instance of the ScheduleAppointment class. Then configure the required properties as shown in the following code example.

ScheduleAppointmentCollection appointmentCollection = new ScheduleAppointmentCollection(); 

ScheduleAppointment clientMeeting = new ScheduleAppointment();

clientMeeting.StartTime = new DateTime(DateTime.Now.Year,

DateTime.Now.Month, DateTime.Now.Day, 10, 0, 0);

clientMeeting.EndTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month,

DateTime.Now.Day, 12, 0, 0);

clientMeeting.Color = Color.Blue;

clientMeeting.Subject = "ClientMeeting";

appointmentCollection.Add(clientMeeting);

schedule.DataSource = appointmentCollection;

Using a custom object to schedule an appointment

The data source of the Scheduler is not limited to the collection with ScheduleAppointment objects. You can also populate your own collection with custom objects. Like if you wanted to schedule an appointment with more details other than those available in the predefined model.

For example, the following code sample is a Meeting class which is created from the service. It also needs to map these properties to the Scheduler control.

public class Meeting 

{

public string Purpose { get; set; }

public string Organizer { get; set; }

public string Attendees { get; set; }

public string Location { get; set; }

public DateTime From { get; set; }

public DateTime To { get; set; }

}

Let’s map the properties from the custom class to the Scheduler control using the AppointmentMapping property as shown below.

<syncfusion:SfSchedule> 

    <syncfusion:SfSchedule.AppointmentMapping> 

        <syncfusion:ScheduleAppointmentMapping  

               EndTimeMapping="To" 

        StartTimeMapping="From" 

        LocationMapping="Location" 

        SubjectMapping="Purpose "/> 

    </syncfusion:SfSchedule.AppointmentMapping> 

</syncfusion:SfSchedule> 

The Scheduler also supports replacing the entire appointment view using DataTemplate if you want to show any special information on the UI from the custom object. Similar to the attendee list in the above Meeting model. Refer to the DataTemplate and DataTemplateSelector support to learn more about configuring data templates in appointments.

Interactively rescheduling appointments

Quickly change appointment dates just by dragging and dropping an appointment into another time frame. As opposed to opening a date picker to choose a new date. The Scheduler provides all the required events to handle dragging and dropping an appointment.

Enable this support using the AllowAppointmentDrag property. The appointment drag and drop documentation can inform about the events that are triggered while dragging an appointment and updating the data source with a new time frame.

Syncfusion Scheduler Drag and Drop

Making a recurrence appointment

To make your appointment repeat at a regular interval, the Scheduler control is flexible to configure recurrence appointments. The ScheduleAppointment model itself has a property to configure the recurrence of a specific appointment. If you have the recurrence details in a custom object, you can map the property to the ScheduleAppointmentMapping.RecurrenceRuleMapping property.

The following code example demonstrates how to create a recurrence appointment in the Scheduler control.

RecurrenceProperties recurrenceProperties = new RecurrenceProperties(); 

recurrenceProperties.RecurrenceType = RecurrenceType.Daily;

recurrenceProperties.RecurrenceRange = RecurrenceRange.Count;

recurrenceProperties.Interval = 2;

recurrenceProperties.RecurrenceCount = 10;

//Generate the recurrence rule using RRuleGenerator method and send it to RecurrenceRule property.

scheduleAppointment.RecurrenceRule = schedule.RRuleGenerator(recurrenceProperties, scheduleAppointment.StartTime, scheduleAppointment.EndTime);

Switching to different views in the Xamarin.Forms Scheduler

Choosing the right view is important to convey all the necessary information to your users. Especially changing the view at runtime based on the user’s needs. The Scheduler control provides different types of views such as day view, week view, workweek view, and month view. These are to display appointments over different ranges with different details. The ScheduleView property is available in the SfSchedule class to configure the required view. Each view has control over different elements in the respective view.

<syncfusion:SfSchedule ScheduleView="DayView"/> 

Summary

We learned how to configure the Syncfusion Scheduler control in a Xamarin.Forms application. As well as how to schedule an appointment, interactively reschedule appointments, make a recurrence appointment, and switch to different views. Find a runnable demo of the features showcased in this blog in this GitHub repository.

Visit the Syncfusion feature tour page for more features of the Scheduler control. Browse the help documentation to configure features with example code. Additionally, explore examples of the Scheduler on Google Play and the Microsoft Store.

0 comments

Discussion is closed.

Feedback usabilla icon