Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/syncfusionexamples/schedule-reactive-mvvm-xamarin
This repository contains a sample on How to bind appointments in the Syncfusion Xamarin.Forms Schedule (SfSchedule) using Reactive MVVM?
https://github.com/syncfusionexamples/schedule-reactive-mvvm-xamarin
appointments events mvvm reactiveui schedule sfschedule xamarin xamarin-forms
Last synced: 13 days ago
JSON representation
This repository contains a sample on How to bind appointments in the Syncfusion Xamarin.Forms Schedule (SfSchedule) using Reactive MVVM?
- Host: GitHub
- URL: https://github.com/syncfusionexamples/schedule-reactive-mvvm-xamarin
- Owner: SyncfusionExamples
- Created: 2020-04-24T11:28:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-15T12:52:58.000Z (12 months ago)
- Last Synced: 2024-11-13T18:49:38.644Z (2 months ago)
- Topics: appointments, events, mvvm, reactiveui, schedule, sfschedule, xamarin, xamarin-forms
- Language: C#
- Homepage:
- Size: 2.49 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to bind appointments in Xamarin.Forms Schedule (SfSchedule) using Reactive MVVM
The [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.
You can also refer the following article.
https://www.syncfusion.com/kb/11458/how-to-bind-appointments-in-xamarin-forms-schedule-sfschedule-using-reactive-mvvm
To achieve this, follow the below steps:
**Step 1:** Install the [ReactiveUI](https://www.nuget.org/packages/ReactiveUI/) and [ReactiveUI.XamForms](https://www.nuget.org/packages/ReactiveUI.XamForms/) in your project.
**Step 2:** Create ViewModel which should implement [ReactiveObject](https://reactiveui.net/docs/handbook/view-models/).
``` c#
public class ViewModel : ReactiveObject
{
///
/// collecions for meetings.
///
private ObservableCollection meetings;
///
/// color collection.
///
private List colorCollection;
///
/// current day meeting.
///
private List currentDayMeetings;
public ViewModel()
{
this.Meetings = new ObservableCollection();
this.AddAppointmentDetails();
this.AddAppointments();
}
///
/// Gets or sets meetings.
///
public ObservableCollection Meetings
{
get
{
return this.meetings;
}
set
{
this.RaiseAndSetIfChanged(ref meetings,value);
}
}
///
/// adding appointment details.
///
private void AddAppointmentDetails()
{
this.currentDayMeetings = new List();
this.currentDayMeetings.Add("General Meeting");
this.currentDayMeetings.Add("Plan Execution");
this.currentDayMeetings.Add("Project Plan");
this.currentDayMeetings.Add("Consulting");
this.currentDayMeetings.Add("Support");
this.currentDayMeetings.Add("Development Meeting");
this.currentDayMeetings.Add("Scrum");
this.currentDayMeetings.Add("Project Completion");
this.currentDayMeetings.Add("Release updates");
this.currentDayMeetings.Add("Performance Check");
this.colorCollection = new List();
this.colorCollection.Add(Color.FromHex("#FFA2C139"));
this.colorCollection.Add(Color.FromHex("#FFD80073"));
this.colorCollection.Add(Color.FromHex("#FF1BA1E2"));
this.colorCollection.Add(Color.FromHex("#FFE671B8"));
this.colorCollection.Add(Color.FromHex("#FFF09609"));
this.colorCollection.Add(Color.FromHex("#FF339933"));
this.colorCollection.Add(Color.FromHex("#FF00ABA9"));
this.colorCollection.Add(Color.FromHex("#FFE671B8"));
this.colorCollection.Add(Color.FromHex("#FF1BA1E2"));
this.colorCollection.Add(Color.FromHex("#FFD80073"));
this.colorCollection.Add(Color.FromHex("#FFA2C139"));
this.colorCollection.Add(Color.FromHex("#FFA2C139"));
this.colorCollection.Add(Color.FromHex("#FFD80073"));
this.colorCollection.Add(Color.FromHex("#FF339933"));
this.colorCollection.Add(Color.FromHex("#FFE671B8"));
this.colorCollection.Add(Color.FromHex("#FF00ABA9"));
}
///
/// Adds the appointments.
///
private void AddAppointments()
{
var today = DateTime.Now.Date;
var random = new Random();
for (int month = -1; month < 2; month++)
{
for (int day = -5; day < 5; day++)
{
for (int count = 0; count < 2; count++)
{
var meeting = new Meeting();
meeting.From = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18));
meeting.To = meeting.From.AddHours(1);
meeting.EventName = this.currentDayMeetings[random.Next(7)];
meeting.Color = this.colorCollection[random.Next(14)];
this.Meetings.Add(meeting);
}
}
}
}
}
```
**Step 3:** ContentPage should inherit from ReactiveContentPage and we are going to use **ReactiveUI** Binding to bind our ViewModel to our View.
**XMAL**
``` xml
public partial class MainPage : ReactiveContentPage
{
public MainPage(ViewModel viewModel)
{
}
}
```
**C#**
``` xml
```
**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.
``` c#
public partial class MainPage : ReactiveContentPage
{
public MainPage(ViewModel viewModel)
{
ViewModel = viewModel;
InitializeComponent();
}
}
```