{"id":14966945,"url":"https://github.com/syncfusionexamples/schedule-reactive-mvvm-xamarin","last_synced_at":"2026-03-07T10:31:02.265Z","repository":{"id":98096142,"uuid":"258493600","full_name":"SyncfusionExamples/schedule-reactive-mvvm-xamarin","owner":"SyncfusionExamples","description":"This repository contains a sample on How to bind appointments in the Syncfusion Xamarin.Forms Schedule (SfSchedule) using Reactive MVVM?","archived":false,"fork":false,"pushed_at":"2024-02-15T12:52:58.000Z","size":2608,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T06:29:09.149Z","etag":null,"topics":["appointments","events","mvvm","reactiveui","schedule","sfschedule","xamarin","xamarin-forms"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-24T11:28:55.000Z","updated_at":"2024-10-29T21:41:52.000Z","dependencies_parsed_at":"2024-09-02T17:53:54.747Z","dependency_job_id":"2d905bf3-337d-4e40-a86b-0deeaca006b0","html_url":"https://github.com/SyncfusionExamples/schedule-reactive-mvvm-xamarin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fschedule-reactive-mvvm-xamarin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fschedule-reactive-mvvm-xamarin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fschedule-reactive-mvvm-xamarin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fschedule-reactive-mvvm-xamarin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/schedule-reactive-mvvm-xamarin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241558519,"owners_count":19982092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appointments","events","mvvm","reactiveui","schedule","sfschedule","xamarin","xamarin-forms"],"created_at":"2024-09-24T13:37:11.493Z","updated_at":"2026-03-07T10:31:02.210Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to bind appointments in Xamarin.Forms Schedule (SfSchedule) using Reactive MVVM\n\nThe [SfSchedule](https://help.syncfusion.com/xamarin/scheduler/overview?) allows you to bind schedule appointments to the reactive UI ViewModel which is a composable and cross-platform model-view-viewmodel framework for all .NET platforms.\n\nYou can also refer the following article.\n\nhttps://www.syncfusion.com/kb/11458/how-to-bind-appointments-in-xamarin-forms-schedule-sfschedule-using-reactive-mvvm\n\nTo achieve this, follow the below steps:\n\n**Step 1:** Install the [ReactiveUI](https://www.nuget.org/packages/ReactiveUI/) and [ReactiveUI.XamForms](https://www.nuget.org/packages/ReactiveUI.XamForms/) in your project.\n\n**Step 2:** Create ViewModel which should implement [ReactiveObject](https://reactiveui.net/docs/handbook/view-models/).\n``` c#\npublic class ViewModel : ReactiveObject\n    {\n        /// \u003csummary\u003e\n        /// collecions for meetings.\n        /// \u003c/summary\u003e\n        private ObservableCollection\u003cMeeting\u003e meetings;\n \n        /// \u003csummary\u003e\n        /// color collection.\n        /// \u003c/summary\u003e\n        private List\u003cColor\u003e colorCollection;\n \n        /// \u003csummary\u003e\n        /// current day meeting.\n        /// \u003c/summary\u003e\n        private List\u003cstring\u003e currentDayMeetings;\n \n        public ViewModel()\n        {\n            this.Meetings = new ObservableCollection\u003cMeeting\u003e();\n            this.AddAppointmentDetails();\n            this.AddAppointments();\n        }\n \n        /// \u003csummary\u003e\n        /// Gets or sets meetings.\n        /// \u003c/summary\u003e\n        public ObservableCollection\u003cMeeting\u003e Meetings\n        {\n            get\n            {\n                return this.meetings;\n            }\n \n            set\n            {\n                this.RaiseAndSetIfChanged(ref meetings,value);\n            }\n        }\n \n        /// \u003csummary\u003e\n        /// adding appointment details.\n        /// \u003c/summary\u003e\n        private void AddAppointmentDetails()\n        {\n            this.currentDayMeetings = new List\u003cstring\u003e();\n            this.currentDayMeetings.Add(\"General Meeting\");\n            this.currentDayMeetings.Add(\"Plan Execution\");\n            this.currentDayMeetings.Add(\"Project Plan\");\n            this.currentDayMeetings.Add(\"Consulting\");\n            this.currentDayMeetings.Add(\"Support\");\n            this.currentDayMeetings.Add(\"Development Meeting\");\n            this.currentDayMeetings.Add(\"Scrum\");\n            this.currentDayMeetings.Add(\"Project Completion\");\n            this.currentDayMeetings.Add(\"Release updates\");\n            this.currentDayMeetings.Add(\"Performance Check\");\n \n            this.colorCollection = new List\u003cColor\u003e();\n            this.colorCollection.Add(Color.FromHex(\"#FFA2C139\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFD80073\"));\n            this.colorCollection.Add(Color.FromHex(\"#FF1BA1E2\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFE671B8\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFF09609\"));\n            this.colorCollection.Add(Color.FromHex(\"#FF339933\"));\n            this.colorCollection.Add(Color.FromHex(\"#FF00ABA9\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFE671B8\"));\n            this.colorCollection.Add(Color.FromHex(\"#FF1BA1E2\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFD80073\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFA2C139\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFA2C139\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFD80073\"));\n            this.colorCollection.Add(Color.FromHex(\"#FF339933\"));\n            this.colorCollection.Add(Color.FromHex(\"#FFE671B8\"));\n            this.colorCollection.Add(Color.FromHex(\"#FF00ABA9\"));\n        }\n \n        /// \u003csummary\u003e\n        /// Adds the appointments.\n        /// \u003c/summary\u003e\n        private void AddAppointments()\n        {\n            var today = DateTime.Now.Date;\n            var random = new Random();\n            for (int month = -1; month \u003c 2; month++)\n            {\n                for (int day = -5; day \u003c 5; day++)\n                {\n                    for (int count = 0; count \u003c 2; count++)\n                    {\n                        var meeting = new Meeting();\n                        meeting.From = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18));\n                        meeting.To = meeting.From.AddHours(1);\n                        meeting.EventName = this.currentDayMeetings[random.Next(7)];\n                        meeting.Color = this.colorCollection[random.Next(14)];\n                        this.Meetings.Add(meeting);\n                    }\n                }\n            }\n        }\n    }\n```\n**Step 3:** ContentPage should inherit from ReactiveContentPage\u003cViewModel\u003e and we are going to use **ReactiveUI** Binding to bind our ViewModel to our View.\n\n**XMAL**\n``` xml\npublic partial class MainPage : ReactiveContentPage\u003cViewModel\u003e\n{\n        public MainPage(ViewModel viewModel)\n        {\n            \n        }\n}\n```\n**C#**\n``` xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\" ?\u003e\n\u003crxui:ReactiveContentPage xmlns=\"http://xamarin.com/schemas/2014/forms\"\n             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n             xmlns:local=\"clr-namespace:ScheduleXamarin\"\n             xmlns:rxui=\"clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms\"\n             xmlns:schedule=\"clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms\"\n             x:Class=\"ScheduleXamarin.MainPage\"\n             x:TypeArguments=\"local:ViewModel\"\u003e\n \n    \u003cContentPage.Content\u003e\n       \u003cschedule:SfSchedule x:Name=\"Schedule\"\n                                 DataSource=\"{Binding Meetings}\"\n                                 ScheduleView=\"MonthView\"\n                                 ShowAppointmentsInline=\"True\"\n                                 Margin=\"0\"\u003e\n                \u003cschedule:SfSchedule.AppointmentMapping\u003e\n                \u003cschedule:ScheduleAppointmentMapping\n                        ColorMapping=\"Color\"\n                        EndTimeMapping=\"To\"\n                        StartTimeMapping=\"From\"\n                        SubjectMapping=\"EventName\"\n                        /\u003e\n            \u003c/schedule:SfSchedule.AppointmentMapping\u003e\n           \n        \u003c/schedule:SfSchedule\u003e\n \u003c/ContentPage.Content\u003e\n\u003c/rxui:ReactiveContentPage\u003e\n```\n**Step 4:** View can be connected in one-way dependent manner to the ViewModel through [bindings](https://reactiveui.net/docs/handbook/data-binding/). You can set the **BindingContext** for the **SfSchedule** in MainPage.cs itself in code behind like below.\n``` c#\npublic partial class MainPage : ReactiveContentPage\u003cViewModel\u003e\n{\n        public MainPage(ViewModel viewModel)\n        {\n            ViewModel = viewModel;\n            InitializeComponent();\n        }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fschedule-reactive-mvvm-xamarin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fschedule-reactive-mvvm-xamarin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fschedule-reactive-mvvm-xamarin/lists"}