MAUI sfScheduler - passing in API data into Scheduler

Question

I have a .Net MAUI app (target platform And, iOS & Win) im trying to use the SyncFusion Scheduler for the first time..

I have everything working if I hard code data to return from the ViewModel and into the scheduler.. but im struggling to figure out how to convert the data retruned from the API into the SchedulerAppointments.

XAML:

<scheduler:SfScheduler x:Name="calendar" View="Month" FirstDayOfWeek="Monday" AllowedViews="Week ,Month"   
                             TodayHighlightBrush="Gray" AppointmentsSource=" {Binding SchedulerEvents}" Tapped="calendar_Tapped" >

            <scheduler:SfScheduler.MonthView>
                <scheduler:SchedulerMonthView AppointmentDisplayMode="Indicator"  />
            </scheduler:SfScheduler.MonthView>

            <scheduler:SfScheduler.BindingContext >
                <local:SchedulerControlViewModel>
                    
                </local:SchedulerControlViewModel>
            </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>

View Model:

using Syncfusion.Maui.Scheduler;
using System.Collections.ObjectModel;

namespace MyGolfSociety.ViewModels
{
    public class SchedulerControlViewModel
    {
        public ObservableCollection<SchedulerAppointment> SchedulerEvents { get; set; }
        public SchedulerControlViewModel()
        {

            this.SchedulerEvents = new ObservableCollection<SchedulerAppointment>
            {
                new SchedulerAppointment
                {

//THE HARDED CODED DATA I NEED TO REPLACE WITH THE ObservableCollection

                    StartTime = new DateTime(2023, 8, 5,00,01,01),
                    EndTime = new DateTime(2023, 8, 5,23,01,01),
                    Subject = "TEST Appointment",
                    IsAllDay = true

                }
            };

        }
    }
}

Events Model:

namespace MyGolfSociety.Models
{
    public class Events
    {
        public int EventId { get; set; }

        public string? EventName { get; set; }

        public DateTime EventDateStart { get; set; }

        public DateTime? EventDateEnd { get; set; }

        public int? CourseId { get; set; }
    }
}

I have returned an ObservableCollection of type Events (which is my model) but im not sure how to convert or pass in the content of the Observable collection into the Schedule Appointment without just lopping the the collection.. surly there has to be a better more efficient way..?

Answer 1

As Jason suggested, you may need to map those properties of the Model:Events class by using the AppointmentMapping property like below:

<scheduler:SfScheduler  x:Name="calendar" 
                        View="Month" 
                        FirstDayOfWeek="Monday" 
                        AllowedViews="Week ,Month"   
                        TodayHighlightBrush="Gray" 
                        AppointmentsSource=" {Binding SchedulerEvents}" 
                        Tapped="calendar_Tapped" >
    <scheduler:SfScheduler.AppointmentMapping>
        <scheduler:SchedulerAppointmentMapping
                Subject="TEST Appointment"
                StartTime="EventDateStart"
                EndTime="EventDateEnd"
                IsAllDay="IsAllDay"
                Id="EventId" />
    </scheduler:SfScheduler.AppointmentMapping>

     <scheduler:SfScheduler.MonthView>
           <scheduler:SchedulerMonthView AppointmentDisplayMode="Indicator"/>
     </scheduler:SfScheduler.MonthView>

      <scheduler:SfScheduler.BindingContext >
                <local:SchedulerControlViewModel>   
                </local:SchedulerControlViewModel>
      </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>