Many different colors for selected cells

[Yaro]

Hello,

I'm using SfCalendar, and right now I can only see one color for the SelectionBackground. How can I set different colors for selected cells? I need to have a different color for my first SelectedDate.

In the screenshot, April 3rd should have a different color, such as red. When I tap on April 6th, it should also be red.

Please, advice, how to do it?

[Indumathi Ravichandran]

Hi Yaro,

As per the current implementation, there is no support customize the month cell with different colors.

We have already considered your requirement as a feature for “Provide a support to multi-colors for multi selection mode in .NET MAUI Calendar (SfCalendar)” and logged feature request for the same.

We plan to implement this feature in any of our upcoming releases. During the planning stage for each release cycle, we review all open features and identify implementations based on parameters such as product vision, technological feasibility, and customer interest. Please upvote this features to prioritize it.

We will notify you when this feature is implemented. However, you can communicate with us regarding any open features at any time using our Feature Report page.

Feedback link: https://www.syncfusion.com/feedback/51673/provide-a-support-to-multi-colors-for-multi-selection-mode-in-net-maui-calendar

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count.

Regards,

Indumathi R

[Yaro]

Hello Indumathi R

I have an SFCalendar, and when I change the date by tapping on it, the color disappears on Android devices. It works correctly on iOS.

Looks like it's Android Bug.

<calendar:SfCalendar 
    x:Name="SfCalendar"
    Grid.Row="2"
    Grid.Column="0"
    Grid.ColumnSpan="2"
    CanToggleDaySelection="False"
    ShowTrailingAndLeadingDates="False"
    NavigationDirection="Horizontal"
    BackgroundColor="{StaticResource PrimaryWhite}"
    TodayHighlightBrush="{StaticResource PrimaryBlue}"
    SelectionBackground="#06D001"
    SelectionMode="Multiple"
    DisplayDate="{Binding  SelectedDate}"
    SelectedDates="{Binding SpecialDatesDates}">
    <!-- Header view -->
    <calendar:SfCalendar.HeaderView>
        <calendar:CalendarHeaderView
            TextStyle="{StaticResource TitleTextStyle}"
            ShowNavigationArrows="True" />
    </calendar:SfCalendar.HeaderView>
</calendar:SfCalendar>

private Task<bool> ConstructCalendarAsync()
{
    CalendarTextStyle dayTextStyle = new () { TextColor = (Color)Application.Current.Resources["PrimaryBlue"], FontSize = 14 };
    CalendarTextStyle textStyle = new () { TextColor = (Color)Application.Current.Resources["PrimaryBlack"], FontSize = 18 };

    SfCalendar.SelectedDates = _bindingContext.SpecialDatesDates;
    SfCalendar.SelectableDayPredicate = date => !_bindingContext.Holidays.Contains(date.Date) && !_bindingContext.WeekendDays.Contains(date.DayOfWeek);
    SfCalendar.MonthView = new CalendarMonthView
    {
       FirstDayOfWeek = DayOfWeek.Sunday,
       WeekendDays = _bindingContext.WeekendDays.ToList(),

       //Today
       TodayTextStyle = textStyle,

       //Another dates
       TextStyle = textStyle,

       //Selection
       SelectionTextStyle = textStyle,

       //Day of week
       HeaderView = new CalendarMonthHeaderView { TextStyle = dayTextStyle }
    };

    SfCalendar.Tapped += (_, args) =>
    {
       var startDate = _bindingContext.SpecialDatesDates.FirstOrDefault().Date;

       _bindingContext.SelectedDate = args.Date;

       if (!_bindingContext.IsStartDateSelectionInProgress && args.Date < startDate)
       {
          SfCalendar.SelectedDates = _bindingContext.SpecialDatesDates;
          return;
       }

       _bindingContext.DateSelected.Execute(args.Date);
    };

    return Task.FromResult(true);
}

private void UpdateDates()
{
    MessagingCenter.Instance.Subscribe<CalendarPageViewModel>(this, PresentationConstants.CalendarDataReady, _ => { Task.Run(ConstructCalendarAsync); });
    MessagingCenter.Instance.Subscribe<CalendarPageViewModel>(this, PresentationConstants.UpdateCalendarSpecialDates, _ => { MainThread.BeginInvokeOnMainThread(
       () =>
       {
          MainThread.BeginInvokeOnMainThread(() =>
             {
                SfCalendar.SelectedDates.Clear();
                SfCalendar.SelectedDates = _bindingContext.SpecialDatesDates;
             }
          );
       });
    });
}

I have an SFCalendar, and when I change the date by tapping on it, the color disappears on Android devices. It works correctly on iOS.

[Indumathi Ravichandran]

Hi yaro,

We have already found and fixed the mentioned issue “Selection disappears when clear the selected dates and again add the date through Tapped event in .NET MAUI Calendar” and include the issue fix in our upcoming Weekly nuget release package, which is expected to be rolled out by October 22, 2024 and let you know once release rolled out. We appreciate your patience until then.

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,

Indumathi R

[Indumathi Ravichandran]

Hi yaro,

We have fixed the issue “Selection disappears when clear the selected dates and again add the date through Tapped event in .NET MAUI Calendar”. Due to the testing phase, we have prepared a custom nuget that includes the fix and have attached it below for your reference. Please test the patch and let us know if your issue is resolved.

Before installing the patch, kindly remove bin and obj folders from all the projects of solution and clear NuGet cache.
https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache

Please refer to the following KB documentation on how to configure the custom assembly: https://www.syncfusion.com/kb/8279/how-to-apply-the-custom-assemblies-when-configured-the-project-with-syncfusion-nuget

Disclaimer:

Please note that this custom NuGet was created for version 27.1.55 specifically to address this issue.

Regards,

Indumathi R

Attachment: Calendar_custom_nuget_cd5ef02b.zip

[Indumathi Ravichandran]

Hi yaro,

We have fixed the reported scenario “Selection disappears when clear the selected dates and again add the date through Tapped event in .NET MAUI Calendar” and included the issue fix in our latest weekly nuget release version 27.1.57, which is available for download at nuget.org. Kindly update to the latest version for resolving the issue.

Root cause:

In Multiple Selection, selection is not rendering while clearing and adding the selected dates in the Tapped event in Windows and Android platform. Resolved the issue by calling the UpdateSelectedDates Method first and then triggered the tapped event.

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance.

Regards,

Indumathi R

[Yaro]

Hello.

I am still experiencing this issue.
No selections are made when I tap.

Here is video with issue - Video
Android only, version 27.1.55.

[Indumathi Ravichandran]

Hi Yaro,

Could you please confirm if version 27.1.57 addresses the issue? We have included the fix in that version.

For your reference, here are the release notes:

Release Notes for v27.1.57

Please confirm if the issue has been fixed in this version and let us know whether it is resolved.

Regards,

Indumathi R

[Yaro]

Hello.

Updated to version 27.1.57, and everything works!

Thank you!

Could you please advise when multi-color selection will be implemented?
For example, I need to have the start and end dates selected in a different color.

[Indumathi Ravichandran]

Hi Yaro,

We are glad to know that your issue has been fixed. Please let us know if you need any other assistance. We will be happy to assist you. 

Regarding Query: Could you please advise when multi-color selection will be implemented? For example, I need to have the start and end dates selected in a different color.

We are unable to commit a definite timeline for the implementation of the requested feature. The decision regarding this matter lies solely with the management, and it has already been outlined in our SLA. We request you to keep track of the feature status in the feedback link. As progress unfolds, any pertinent updates regarding the feature's implementation will be relayed to you via the feedback link. We appreciate your patience in the meantime. 

https://www.syncfusion.com/feedback/51673/provide-a-support-to-multi-colors-for-multi-selection-mode-in-net-maui-calendar

Suppose, your requirement is to show different color in start and end date of the Range selection means, Kindly use the StartRangeSelectionBackground and EndRangeSelectionBackground. Please find the UG documentation for the same.

https://help.syncfusion.com/maui/calendar/customizations#selection-cell-customization

Please let us know if you need further assistance.

Regards,

Indumathi R