Use Scheduler with own custom model class

[Alvaro]

Hi, I have a class, Bookings, with a few properties and amongst them I have' CheckInTime' and 'CheckOutTime' properties.

<SfSchedule TValue="Bookings" Height="550px">
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
        <ScheduleView Option="View.Agenda"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

 List<Bookings> myBookings = new List<Bookings>

My questions is, is it possible to bind my own model to the scheduler?  I have only seen examples with the 'AppointmentData' class. So I was wondering I f I can use my model and bind my datetime properties to it.

Thanks!

[Praveenkumar Narasimhanaidu]

Hi Alvaro, 

Greetings from Syncfusion support..! 

We have validated your requirement “Use Scheduler with own custom model class” at our end and prepared a sample for your reference which can be downloaded from following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/169875/ze/Blazor-schedule-custome-field-names1940665207 

 

<SfSchedule TValue="BookingsData" Height="550px" @bind-SelectedDate="@CurrentDate"> 

    <ScheduleEventSettings DataSource="@DataSource"> 

        <ScheduleField Id="TravelId"> 

            <FieldSubject Name="TravelSummary"></FieldSubject> 

            <FieldLocation Name="Source"></FieldLocation> 

            <FieldDescription Name="Comments"></FieldDescription> 

            <FieldIsAllDay Name="FullDay"></FieldIsAllDay> 

            <FieldStartTime Name="CheckInTime"></FieldStartTime> 

            <FieldEndTime Name="CheckOutTime"></FieldEndTime> 

            <FieldStartTimezone Name="Origin"></FieldStartTimezone> 

            <FieldEndTimezone Name="Destination"></FieldEndTimezone> 

        </ScheduleField> 

    </ScheduleEventSettings> 

    <ScheduleViews> 

        <ScheduleView Option="View.Day"></ScheduleView> 

        <ScheduleView Option="View.Week"></ScheduleView> 

        <ScheduleView Option="View.WorkWeek"></ScheduleView> 

        <ScheduleView Option="View.Month"></ScheduleView> 

        <ScheduleView Option="View.Agenda"></ScheduleView> 

    </ScheduleViews> 

</SfSchedule> 

 

@code{ 

    DateTime CurrentDate = new DateTime(2020, 1, 10); 

    List<BookingsData> DataSource = new List<BookingsData> 

{ 

        new BookingsData { TravelId = 1, TravelSummary = "Paris", CheckInTime = new DateTime(2020, 1, 10, 10, 0, 0) , CheckOutTime = new DateTime(2020, 1, 10, 12, 30, 0), 

        Source = "London", Comments = "Summer vacation planned for outstation.", Origin= "Asia/Yekaterinburg", Destination= "Asia/Yekaterinburg" } 

    }; 

    public class BookingsData 

    { 

        public int TravelId { get; set; } 

        public string TravelSummary { get; set; } 

        public DateTime CheckInTime { get; set; } 

        public DateTime CheckOutTime { get; set; } 

        public bool FullDay { get; set; } 

        public string Source { get; set; } 

        public string Comments { get; set; } 

        public string Origin { get; set; } 

        public string Destination { get; set; } 

    } 

} 

 

For more information, please refer following documentation links. 

UG(custom-field-names): https://blazor.syncfusion.com/documentation/scheduler/appointments#binding-different-field-names 

UG(adding-custom-field): https://blazor.syncfusion.com/documentation/scheduler/appointments#adding-custom-fields 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Praveenkumar