{"id":45001,"date":"2019-08-09T11:07:53","date_gmt":"2019-08-09T18:07:53","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=45001"},"modified":"2020-04-30T04:37:40","modified_gmt":"2020-04-30T11:37:40","slug":"scheduler-xamarin-forms-syncfusion","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/scheduler-xamarin-forms-syncfusion\/","title":{"rendered":"Add Scheduling Capabilities to Xamarin.Forms apps with Syncfusion Scheduler"},"content":{"rendered":"<p><em>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.<\/em><\/p>\n<h2>Syncfusion Scheduler for Xamarin.Forms<\/h2>\n<p>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.\n<center>\n<div style=\"width: 313px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-45001-1\" width=\"313\" height=\"500\" poster=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/03\/swimlane-xamarin-cross-platform-1.png\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/08\/Introduction.mp4?_=1\" \/><a href=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/08\/Introduction.mp4\">http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/08\/Introduction.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n<h3>Integrating the Scheduler in a Xamarin.Forms application<\/h3>\n<ol>\n<li>Create a new Xamarin.Forms project or open an existing one in Visual Studio or Visual Studio for Mac.<\/li>\n<li>Open the <strong>Manage NuGet Packages for Solution<\/strong> window. Search for the <a href=\"https:\/\/www.nuget.org\/packages\/Syncfusion.Xamarin.SfSchedule\/\">Syncfusion.Xamarin.SfSchedule package<\/a>. Install it in all Xamarin.Forms projects.<\/li>\n<p><em>Note: This package must be installed in all the projects separately by using the <strong>Add Packages<\/strong> option in Visual Studio for Mac.<\/em><\/p>\n<li>We have added the reference of the Syncfusion Scheduler control, so now let\u2019s create an instance of <strong>SfSchedule<\/strong> and add it in your visual tree.<\/li>\n<p>Add the XML namespace of the SfSchedule control:<\/p>\n<pre class=\"lang:xhtml decode:true\">\r\nxmlns:syncfusion=\"clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms\"<\/pre>\n<p>Initialize the SfSchedule using the declared XML namespace:<\/p>\n<pre class=\"prettyprint\">&#60;?xml version=\"1.0\" encoding=\"utf-8\" ?&#62; \r\n\r\n&#60;ContentPage \r\n\r\n    x:Class=\"ScheduleSample.MainPage\" \r\n\r\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\" \r\n\r\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\" \r\n\r\n    xmlns:local=\"clr-namespace:ScheduleSample\" \r\n\r\n    xmlns:syncfusion=\"clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms\"&#62; \r\n\r\n    &#60;syncfusion:SfSchedule\/&#62;  \r\n\r\n&#60;\/ContentPage&#62; <\/pre>\n<li>To launch the scheduler in iOS, call the <strong>SfScheduleRenderer.Init()<\/strong> method in the <strong>FinishedLaunching<\/strong> overridden method as demonstrated below.<\/li>\n<pre class=\"lang:xhtml decode:true\">\r\npublic override bool FinishedLaunching(UIApplication app, NSDictionary options) \r\n\r\n{ \r\n\r\n    global::Xamarin.Forms.Forms.Init(); \r\n\r\n    SfScheduleRenderer.Init(); \r\n\r\n    LoadApplication(new App()); \r\n\r\n    return base.FinishedLaunching(app, options); \r\n\r\n} \r\n<\/pre>\n<\/ol>\n<p>That\u2019s it! We\u2019ve 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 <a href=\"https:\/\/help.syncfusion.com\/xamarin\/sfschedule\/getting-started\">Syncfusion\u2019s documentation<\/a>.<\/p>\n<h3>Scheduling appointments in the Xamarin.Forms Scheduler<\/h3>\n<p>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.<\/p>\n<h4>Using a predefined model to schedule an appointment<\/h4>\n<p>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.<\/p>\n<pre class=\"lang:xhtml decode:true\">\r\nScheduleAppointmentCollection appointmentCollection = new ScheduleAppointmentCollection(); \r\n\r\nScheduleAppointment clientMeeting = new ScheduleAppointment();\r\n\r\nclientMeeting.StartTime = new DateTime(DateTime.Now.Year,\r\n\r\nDateTime.Now.Month, DateTime.Now.Day, 10, 0, 0);\r\n\r\nclientMeeting.EndTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month,\r\n\r\nDateTime.Now.Day, 12, 0, 0);\r\n\r\nclientMeeting.Color = Color.Blue;\r\n\r\nclientMeeting.Subject = \"ClientMeeting\";\r\n\r\nappointmentCollection.Add(clientMeeting);\r\n\r\nschedule.DataSource = appointmentCollection;\r\n<\/pre>\n<h4>Using a custom object to schedule an appointment<\/h4>\n<p>The data source of the Scheduler is not limited to the collection with <strong>ScheduleAppointment<\/strong> 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.<\/p>\n<p>For example, the following code sample is a <strong>Meeting<\/strong> class which is created from the service. It also needs to map these properties to the Scheduler control.<\/p>\n<pre class=\"lang:xhtml decode:true\">\r\npublic class Meeting \r\n\r\n{\r\n\r\npublic string Purpose { get; set; }\r\n\r\npublic string Organizer { get; set; }\r\n\r\npublic string Attendees { get; set; }\r\n\r\npublic string Location { get; set; }\r\n\r\npublic DateTime From { get; set; }\r\n\r\npublic DateTime To { get; set; }\r\n\r\n}\r\n<\/pre>\n<p>Let\u2019s map the properties from the custom class to the Scheduler control using the <strong>AppointmentMapping<\/strong> property as shown below.<\/p>\n<pre class=\"prettyprint\">&#60;syncfusion:SfSchedule&#62; \r\n\r\n    &#60;syncfusion:SfSchedule.AppointmentMapping&#62; \r\n\r\n        &#60;syncfusion:ScheduleAppointmentMapping  \r\n\r\n               EndTimeMapping=\"To\" \r\n\r\n        StartTimeMapping=\"From\" \r\n\r\n        LocationMapping=\"Location\" \r\n\r\n        SubjectMapping=\"Purpose \"\/&#62; \r\n\r\n    &#60;\/syncfusion:SfSchedule.AppointmentMapping&#62; \r\n\r\n&#60;\/syncfusion:SfSchedule&#62; <\/pre>\n<p>The Scheduler also supports replacing the entire appointment view using <strong>DataTemplate<\/strong> 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 <a href=\"https:\/\/help.syncfusion.com\/xamarin\/sfschedule\/data-bindings#customize-appearance-using-datatemplate\">DataTemplate and DataTemplateSelector support<\/a> to learn more about configuring data templates in appointments.<\/p>\n<h3>Interactively rescheduling appointments<\/h3>\n<p>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.<\/p>\n<p>Enable this support using the <strong>AllowAppointmentDrag<\/strong> property. The <a href=\"https:\/\/help.syncfusion.com\/xamarin\/sfschedule\/drag-and-drop-appointments\">appointment drag and drop documentation<\/a> can inform about the events that are triggered while dragging an appointment and updating the data source with a new time frame.<\/p>\n<p><center>\n<img decoding=\"async\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/08\/drag-and-drop.gif\" alt=\"Syncfusion Scheduler Drag and Drop\" width=\"316.5\" height=\"500\" class=\"alignnone size-full wp-image-45024\" \/>\n<\/center><\/p>\n<h3>Making a recurrence appointment<\/h3>\n<p>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 <strong>ScheduleAppointmentMapping.RecurrenceRuleMapping<\/strong> property.<\/p>\n<p>The following code example demonstrates how to create a recurrence appointment in the Scheduler control.<\/p>\n<pre class=\"lang:xhtml decode:true\">\r\nRecurrenceProperties recurrenceProperties = new RecurrenceProperties(); \r\n\r\nrecurrenceProperties.RecurrenceType = RecurrenceType.Daily;\r\n\r\nrecurrenceProperties.RecurrenceRange = RecurrenceRange.Count;\r\n\r\nrecurrenceProperties.Interval = 2;\r\n\r\nrecurrenceProperties.RecurrenceCount = 10;\r\n\r\n\/\/Generate the recurrence rule using RRuleGenerator method and send it to RecurrenceRule property.\r\n\r\nscheduleAppointment.RecurrenceRule = schedule.RRuleGenerator(recurrenceProperties, scheduleAppointment.StartTime, scheduleAppointment.EndTime);\r\n<\/pre>\n<h3>Switching to different views in the Xamarin.Forms Scheduler<\/h3>\n<p>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\u2019s 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 <strong>ScheduleView<\/strong> property is available in the <strong>SfSchedule<\/strong> class to configure the required view. Each view has control over different elements in the respective view.<\/p>\n<pre class=\"prettyprint\">&#60;syncfusion:SfSchedule ScheduleView=\"DayView\"\/&#62; <\/pre>\n<h3>Summary<\/h3>\n<p>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 <a href=\"https:\/\/github.com\/SyncfusionExamples\/xamarin-forms-appointment-scheduler\">this GitHub repository<\/a>.<\/p>\n<p>Visit the <a href=\"https:\/\/www.syncfusion.com\/xamarin-ui-controls\/scheduler\">Syncfusion feature tour page<\/a> for more features of the Scheduler control. Browse the <a href=\"https:\/\/help.syncfusion.com\/xamarin\/sfschedule\/getting-started\">help documentation<\/a> to configure features with example code. Additionally, explore examples of the Scheduler on <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.syncfusion.samplebrowser\">Google Play<\/a> and the <a href=\"https:\/\/www.microsoft.com\/en-us\/p\/syncfusion-essential-studio-for-xamarin\/9nn069tldzf4#activetab=pivot:overviewtab\">Microsoft Store<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn 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.<\/p>\n","protected":false},"author":2927,"featured_media":45024,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,367],"tags":[6534,6517,6516,16],"class_list":["post-45001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin-forms","tag-guest-post","tag-scheduling","tag-syncfusion","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Learn 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.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/2927"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=45001"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/45024"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=45001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=45001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=45001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}