Xamarin Forms Create scrollable timeline - xamarin

Question

I have a problem. I need to create the following image in Xamarin Forms:
The first thing I did was set the schedule as background image, but then its not easy to use. The next thing I thougt of, was a Grid, but a Grid doesn't work because you need to set the height of a row and you can have random rows. I am running out of ideas! :(
I know this website is for coding problems, but I would really appreciate it, because I am stuck on this issue for 2 weeks now and I want to move further with this feature!
Let me know! :)

Answer 1

If want to create a scrollable timeline, I will suggest that install Syncfusion.Xamarin.SfSchedule nuget to achieve that.
Here is the day scrollable time line sample code of Xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
xmlns:schedule="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"
x:Class="XamarinTableView.Views.SyncCalendaPage">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="Start"
HorizontalOptions="CenterAndExpand" />
<schedule:SfSchedule x:Name="schedule"
BackgroundColor="LightGray"
ScheduleView="DayView"
VerticalOptions="FillAndExpand"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
And the .cs sample code:
schedule.ScheduleView = ScheduleView.DayView;
ScheduleAppointmentCollection scheduleAppointmentCollection = new ScheduleAppointmentCollection();
scheduleAppointmentCollection.Add(new ScheduleAppointment()
{
StartTime = new DateTime(2020, 9, 24, 09, 0, 0),
EndTime = new DateTime(2020, 9, 24, 09, 30, 0),
Subject = "Client Meeting",
Notes="1111",
MinHeight = 30,
Color = Color.FromHex("#FFD80073")
});
scheduleAppointmentCollection.Add(new ScheduleAppointment()
{
StartTime = new DateTime(2020, 9, 24, 11, 0, 0),
EndTime = new DateTime(2020, 9, 24, 12, 30, 0),
Subject = "Anniversary",
Notes = "1111",
Color = Color.FromHex("#FFA2C139")
});
schedule.DataSource = scheduleAppointmentCollection;
DayViewSettings dayViewSettings = new DayViewSettings();
dayViewSettings.VerticalLineColor = Color.LightGray;
dayViewSettings.VerticalLineStrokeWidth = 5;
schedule.DayViewSettings = dayViewSettings;
The effect:
Also can refer to Appointments in Xamarin Scheduler (SfSchedule) to custom more appearance of it.