How can I update custom day cell in month view mode asynchronously using customized RadCalendar in .NET MAUI?

[Thanos]

Hi,

I use the RadCalendar control (Telerik UI for .NET MAUI ) and I have already implemented the customization of day cell (in month view mode), based on the following official sample,

https://github.com/telerik/maui-samples/tree/main/Samples/ControlsSamples/Examples/CalendarControl/CustomizationExample

 

More specifically I need to add a small circle color bubble/dot under the specific day label. The first time that calendar loads I need to load some "Appointments" called "FocusedMonthWorkingSchedules" as follows. Every time the user changes focused month I need to perform an HTTPs API call to update the list and so to update the calendar's cells asyncronously.

The problem is when user performs month change, the RadCalendar changes UI immediately (it is logical) and when the API call returns, there is no way to trigger the following override method "SelectStyle" because it has already completed n times. At the moment that "SelectStyle" method runs, the stored data inside the list (in the ViewModel) have not been updated yet until the API calls finish, so RadCalendar shows previous state.

 

public partial class CalendarViewModel : BaseViewModel {

        public List<WorkingScheduleView> FocusedMonthWorkingSchedules;

        public async Task GetFocusedMonthScedule(DateTime selectedDate){

                 ..... // Business Logic

                 FocusedMonthWorkingSchedules = await _restService.GetSchedule(request);

                 .... // Business Logic

        }

}

 

public class CustomCalendarStyleSelector : CalendarStyleSelector {

       protected override Style? SelectStyle(object item, BindableObject container) {

                       var node = (CalendarNode)item;

                       DateTime? date = node?.Date;

                       IView? view = (container as RadLayout)?.Children.FirstOrDefault(x => x.GetType() == typeof(Label));

                       if (view is not null && possibleLabel is Label bubble) {

                               CalendarViewModel viewModel = App.ServiceProvider?.GetService<CalendarViewModel>();

                               WorkingSchedule? workingSchedule =

                                             viewModel?.FocusedMonthWorkingSchedules?.FirstOrDefault( x => x.DateTime == date);

                               bubble.TextColor = workingSchedule?.BubbleColor;

                       }

      }

}

So, is there any best practice to synchronize the data in the UI (RadCalendar), as soon as the https API call finishes?

I have two thoughts, but I cannot find some docs for these,

1. Is there any way to enforce RadCalendar to refresh (e.g. Refresh( ) command)? And if so, can I prevent the initial invokation of "SelectStyle" method n times to improve rendering performance?

2. Is there any way to "pause" the changing month rendering until the asyncronous Task (https API call) finishes? (I think this is a bad practice)

Final thoughts

I can understand that a possible solution could be to use some .NET MAUI handlers, in order to utilize Telerik API for RadCalendar. Is there any example available to implement it using RadCalendar?

Thank you in advance

 

[Nasko]

Hello Thanos,

The easiest way to make RadCalendar rebuild its content and re-apply the StyleSelector is to reset it as demonstrated below:

// Refresh the day style selector.
var selector = calendar.DayStyleSelector;
calendar.DayStyleSelector = null;
calendar.DayStyleSelector = selector;

I've checked the provided code snippets and noticed that inside the selector you are traversing the children of the container to get the Label and change the color. That will definitely lead to performance issues. The suggested approach while working with Style selectors is to return a specific Style based on a custom logic and through that Style to apply the desired visual changes.

Another thing that I can suggest you is to load values from you service for the current month, the previous month and the next month. The selector is always thrown for the current, previous and next month. So when you are at June, the Calendar loads May and July as well. You have 3 initially loaded months. When you navigate to July, August is loaded (this means that the selector is fired for August) and May is removed, so you have June, July and August. Applying the desired Style changes for the next and previous month will definitely make the transition between them more acceptable.

I have prepared a sample project for you that demonstrates how the reset can be performed - please, check it.

I hope this will help you.

Regards,
Nasko
Progress Telerik