MAUI Calendar: How to load RadCalendar's DayTemplate based on monthly changes

[John]

Hi There,

I want to load the DayTemplate according to the month displayed in the current calendar.

The DayTemplate xaml codes: 

 <local:ReminderTemplateSelector.TaskTemplate>
     <DataTemplate>
         <telerik:CalendarBorderLabel Text="{Binding Text}"
                                      TextColor="{StaticResource AccentColor4}"
                                      HorizontalTextAlignment="Center"
                                      VerticalTextAlignment="Center"
                                      FontAttributes="Bold">
             <Label FontFamily="TelerikFontExamples"
                    Text="&#xe80b;"
                    TextColor="{StaticResource AccentColor4}"
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="End"
                    Margin="{OnPlatform Default=0, WinUI='0, 0, 0, 4'}" />
         </telerik:CalendarBorderLabel>
     </DataTemplate>
 </local:ReminderTemplateSelector.TaskTemplate>

ReminderTemplateSelector :

public class ReminderTemplateSelector : DataTemplateSelector
{

    public static readonly BindableProperty TasksProperty = BindableProperty.Create(nameof(Tasks), typeof(ReminderTemplateSelector), typeof(ReminderTemplateSelector), null);

    private List<DateTime> tasks;
    public ReminderTemplateSelector()
    {
      
    }

    public DataTemplate TaskTemplate { get; set; }

    public List<DateTime> Tasks
    {
        get => this.tasks;
        set
        {
            this.tasks = value;
        }
    }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var node = item as CalendarNode;
        var date = node.Date.Value;
          
        bool hasTaskReminder = false;
        if (this.tasks != null)
        {
            hasTaskReminder = this.tasks.Contains(date);
        }
         

        if (hasTaskReminder)
        {
            return this.TaskTemplate;
        }
         
        return null;
    }
}

I am trying to reload the "Task"  by month on OnDisplayDate event,  but OnSelectTemplate executed before the date change.

It is unable to load the correct DayTemplate based on the current month changes. How should I do it?

        private async void OnDisplayDateChanged(object sender, ValueChangedEventArgs<System.DateTime> e)
        {

            this.ReminderTemplateSelector.Tasks = LoadTask(e.NewValue);
        }

[Yana]

Hi John,

Thank you for sharing the code.

Indeed, the template selector is called before the event, still, at this point ( in the selector) the date is already updated. So, you can try to cache the DisplayDate in the selector and check inside the OnSelectTemplate method whether the date is changed  - you can get a reference to the Calendar instance through the item and thus get the current DisplayDate - if it's changed, load new tasks, it should look similar to this:

private DateTime displayDateCache;
 
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
    var node = item as CalendarNode;
    var calendar = (RadCalendar)node.Calendar;
    if (calendar.DisplayDate != this.displayDateCache)
    {
        // Get the tasks.
        this.displayDateCache = calendar.DisplayDate;
    }
 
    ....
}

Give this a try and let me know if you have any additional questions or concerns.

Regards,
Yana
Progress Telerik