996026 - UG Documentation for the Special Date Predicate On Demand on SfCalendar

MAUI/Calendar/customizations.md

@@ -164,6 +164,82 @@ this.calendar.MonthView.SpecialDayPredicate = (date) =>
 >**NOTE**
 * The Background color and text style will be applied based on the following order: selectableDayPredicate dates, special dates, disable dates, today date, weekend dates, trailingLeading dates, and normal dates.
 
+*    **UpdateSpecialDayPredicate** - The UpdateSpecialDayPredicate feature allows the `SfCalendar` to dynamically update special dates after new data is fetched. You can explicitly trigger a refresh to re invoke the [SpecialDayPredicate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_SpecialDayPredicate), ensuring that visual indicators such as icons, text styles, and backgrounds reflect the latest metadata only after the update. The new [UpdateSpecialDayPredicate]https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_UpdateSpecialDayPredicate) provides a direct way to force this reevaluation, guaranteeing that special day indicators display the most recent data after a refresh.
+
+{% tabs %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
+
+<calendar:SfCalendar  x:Name="calendar"  View="Month">
+</calendar:SfCalendar>
+
+{% endhighlight %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
+
+public class MainPage : ContentPage
+{
+
+    public List<DateTime> SpecialDatesCollection = new List<DateTime>();
+
+    public MainPage()
+    {
+        InitializeComponent();
+        calendar.ViewChanged += Calendar_ViewChanged;
+        this.calendar.MonthView.SpecialDayPredicate = (date) =>
+        {
+            foreach (DateTime dates in SpecialDatesCollection)
+            {
+                if (date.Date == dates.Date)
+                {
+                    CalendarIconDetails calendarIcon = GetSpecialDates(dates);
+                    return calendarIcon;
+                }
+            }
+            return null;
+        };
+    }
+
+    private CalendarIconDetails GetSpecialDates(DateTime date)
+    {
+        if (SpecialDatesCollection.Contains(date.Date)) 
+        {
+            CalendarIconDetails calendarIconDetails=new CalendarIconDetails()
+            {
+                Icon = CalendarIcon.Diamond,
+                Fill = Colors.Red, 
+            };
+            return calendarIconDetails;
+        }
+        return null;
+    }
+
+    private async void Calendar_ViewChanged(object sender, CalendarViewChangedEventArgs e)
+    {
+        SpecialDatesCollection.Clear();
+        await LoadSpecialDatesFromAPIAsync(e.NewVisibleDates);
+        calendar.UpdateSpecialDayPredicate();
+    }
+
+    private async Task LoadSpecialDatesFromAPIAsync(CalendarDateRange range)
+    {
+        var httpClient = new HttpClient();
+        var requestData = new { StartDate = range.StartDate.Date, EndDate = range.EndDate.Date };
+        var response = await httpClient.PostAsJsonAsync("https://your-api.com/special-dates", requestData);
+        response.EnsureSuccessStatusCode();
+        var apiResponse = await response.Content.ReadFromJsonAsync<ApiSpecialDatesResponse>();
+        if (apiResponse?.SpecialDates != null)
+        {
+            foreach (var dateStr in apiResponse.SpecialDates)
+            {
+                if (DateTime.TryParse(dateStr, out var date))
+                    specialDates.Add(date.Date);
+            }
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Year cell customization
 You can customize the calendar `year`, `decade`, and `century` views by using the `YearView` property of `SfCalendar`.