Xamarin Forms Create scrollable timeline

Issue

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! :)

Solution

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.

Answered By - Junior Jiang