Odd behavior with scheduler and 70 odd records plus adding data at runtime

[Daten]

Good afternoon All,

I'm attempting to hook an appointment system up to the scheduler,  My initial tests were good but I'm noticing some odd behavior,   

Firstly I am populating the data via an API Library which grabs a list of available slots ,  This is done in OnInitializedAsync 

This adds all available slots to a list of  AppointmentDates  

Since the appointments may not be in the current week, I am setting the selectedDate to the first date pulled from the API,  This is my first issue, The Schedule appears to be on that current date,  but I have to hit the > arrow and then the data appears, (See images attached)

https://prnt.sc/tzs1ds

This brings me to my second issue,  I am using the OnEventRendered to change the color of the events based on the slot type,  However as you can see this 50% of the time renders fine, and other times it never renders the labels (I have double checked and the data is there)

https://prnt.sc/tzs0aq

Finally this is not as much of an issue but we always have slots at the same time for both Mac and iPhones,  As you can see the iPhone is full length, and mac is only half size,  Is there any way to get them so they are next to each other, or under one another so they dont overlap?

Any help with the 3 above would be amazing,  Thank you!

[Hareesh Balasubramanian]

Hi Ashley, 

Greetings from Syncfusion support..! 

Q1: Firstly I am populating the data via an API Library which grabs a list of available slots ,  This is done in OnInitializedAsync 

 

Kindly try the above solution in onAfterRenderedAsync method. 

 

Q2: This brings me to my second issue,  I am using the OnEventRendered to change the color of the events based on the slot type,  However as you can see this 50% of the time renders fine, and other times it never renders the labels (I have double checked and the data is there) 

 

For this query, we suspect that you are using eventTemplate for the Scheduler and kindly share your code snippets used for the eventTemplate property. 

 

Q3: Finally this is not as much of an issue but we always have slots at the same time for both Mac and iPhones,  As you can see the iPhone is full length, and mac is only half size,  Is there any way to get them so they are next to each other, or under one another so they dont overlap? 

 

We suspect that your requirement is to have signalR for your iPhone and MAC, please confirm your requirement to proceed further at our end. 

Kindly share the above requested details with us for the better serve. 

Regards, 

Hareesh 

[Daten]

Good morning Hareesh,  Thank you for the response!

As suggested I have moved the code to OnAfterRenderedAsync however the Scheduler now fails to render with the following error

System.ArgumentOutOfRangeException: The added or subtracted value results in an un-representable DateTime. (Parameter 'value')

which is shortly followed by 

System.ObjectDisposedException: Cannot access a disposed object.

I suspect my issue with label rendering failing is related to the OnAfterRenderAsync

You are correct,  I am using an event template which I will put below,  This is very basic and the correct StartTime is shown in the list,  the Subject is either iPhone or Mac Appointment

(Image attached as I cant seem to paste the HTML here)

https://prnt.sc/u10f6r

I will also put my OnAfterRenderAsync Method to show I'm not doing anything too funky! Thank you again for looking!

 protected async override Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            //API Calls to grab available slots, API Returns SlotStart and SlotEnd only as DateTimes

            iphoneSlots = await _gsxAppointments.getAvalableSlots("IPHONE");

            macSlots = await _gsxAppointments.getAvalableSlots("MAC");




            //If not null add iPhone slots to the list which is bound to the Scheduler 

            if (iphoneSlots.response != null)

            {

                foreach (var slot in iphoneSlots.response.slots)

                {

                    DataSource.Add(new AppointmentsData { StartTime = DateTime.Parse(slot.start), EndTime = DateTime.Parse(slot.end), Subject = "iPhone Appointment", CategoryColor = "#0275d8" });

                }

            }




            //If not null add MAC slots to the list which is bound to the Scheduler 

            if (macSlots.response != null)

            {

                foreach (var slot in macSlots.response.slots)

                {

                    DataSource.Add(new AppointmentsData { StartTime = DateTime.Parse(slot.start), EndTime = DateTime.Parse(slot.end), Subject = "Mac Osx Appointment", CategoryColor = "#5cb85c" });

                }

            }




            //Get the earliest slot and set our selection to that date

            startDate = DataSource.Select(x => x.StartTime).Min();

        }

    }

[Alagumeena Kalaiselvan]

Hi Ashley, 

Thanks for your update. 

We  have evaluated your query and we suspect this may occurred due to getting empty datasource of Scheduler at initial load. So, we suggest to check whether the bounded Scheduler DataSource is null before loading the scheduler. Also you can apply the Event color by using Template instead of using EventRendered event. Refer the below code for that. 

@if (DataSource == null)      // To check the status of DataSource 

{ 

    <p><em>Loading...</em></p> 

} 

else 

{ 

    <SfSchedule TValue="AppointmentsData" Height="650px" CurrentView="View.Week" SelectedDate="@startDate"> 

        <ScheduleEvents TValue="AppointmentsData"> 

        </ScheduleEvents> 

        <ScheduleEventSettings TValue="AppointmentsData" DataSource="@DataSource"> 

            <Template> 

                <div class="template-wrap" style="background: @((context as AppointmentsData).CategoryColor)">@((context as AppointmentsData).StartTime.ToString("HH:mm")) - @((context as AppointmentsData).Subject)</div> 

            </Template> 

        </ScheduleEventSettings> 

    </SfSchedule> 

} 

... 

  

The above sample can be downloaded by the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Schedule-2121077971  

Please try with shared solution and get back to us, if you need further assistance. 

Regards 

Alagumeena.K 

[Daten]

Good morning Hareesh,

You were absolutely right,  It was due to the loading before data,  not sure why I did not figure that one out,  And setting the template background does appear to work though has some styling issues, on the upside it has placed the appointments side by side as originally requested which is great!

I think I can work with everything I have for now,  Thank you very much!

[Vinitha Devi Murugan]

Hi Ashley,

Thanks for the update.

We are glad that your requirement has fulfilled.

Please get in touch with us if you would require any further assistance.

Regards,

M.Vinitha devi