Select week range for separate month.

[nutwich]

Hi,
I want to select a week range for a separate month like this.

I use this code to select a week range when I click a day in the week.

It only works within the same month's week range.

However, for separate months, the select week range only highlights from the first day of the week until the end of the month (not until the end of the week).

Thanks in advance

[nutwich]

I'm using version 4.2.0

[ME-MarvinE]

Solution 1: Upgrade to > 4.5.x

From 4.5.0, each state has its own style that is applied. This way, you are not limited to just the text colour, background colour, and commands. The XCalendar.Forms.Styles.DefaultStyles or XCalendar.Maui.Styles.DefaultStyles class can be used to maintain default functionality when changing these styles. You can then also apply triggers for a specific state's style. In this case, it would be for OtherMonthStyle and you would apply solution #2 to it.

For example:

<xc:DayView
    DateTime="{Binding DateTime}"
    IsCurrentMonth="{Binding IsCurrentMonth}"
    IsInvalid="{Binding IsInvalid}"
    IsSelected="{Binding IsSelected}"
    IsToday="{Binding IsToday}">

    <xc:DayView.OtherMonthStyle>
        <Style BasedOn="{x:Static Styles:DefaultStyles.DefaultDayViewOtherMonthStyle}" TargetType="{x:Type xc:DayView}">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="TextColor" Value="White"/>
                    <Setter Property="BackgroundColor" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </xc:DayView.OtherMonthStyle>
</xc:DayView>

Where the Styles namespace is defined as xmlns:Styles="clr-namespace:XCalendar.Forms.Styles;assembly=XCalendar.Forms" for XCalendar.Forms or
xmlns:Styles="clr-namespace:XCalendar.Maui.Styles;assembly=XCalendar.Maui" for XCalendar.Maui.

You may find more info in discussion #154.

You'll also get many improvements and bug fixes since 4.2.0 :)

Solution 2: Triggers

You may be able to use triggers to set the IsOtherMonth property of a DayView to false when "IsSelected" is true. You would do this inside the DataTemplate you put inside the DayTemplate property of the CalendarView.

Solution 3: Inheritance

You could inherit from DayView and override the method responsible for determining the DayView's DayState and provide your own custom logic.

Here is an example of what you could do:

    public class CustomDayView : DayView
    {
        public override DayState EvaluateDayState()
        {
            if (IsSelected)
            {
                return DayState.Selected;
            }

            return base.EvaluateDayState();
        }
    }

Then you can use your custom control inside a DataTemplate inside the DayTemplate property of a CalendarView.

[nutwich]

Because my application is built on.net 6, I must utilize version 4.2.0.
and I have one more question, in my App, I create calendar in popup page. And when I click the button to show the calendar popup The calendar popup takes a long time to appear around 6 seconds. Is there a way to improve it?

[ME-MarvinE]

Unfortunately not. The CalendarView is just a CollectionView for the days of the week, and another CollectionView for the days. Xamarin and Maui have historically had problems with CollectionView performance and you can see this if you search in the issues of the repos. You can see how fast it runs in the console sample app without having to render UI. Maybe there is somewhere I can optimise PropertyChanged event calls in the Calendar class but I think this is on the side of the Xamarin/MAUI teams to optimise the CollectionView.

I have considered releasing multiple versions of XCalendar for different versions of .NET as it doesn't use any new language features and would be easy to convert.

Also, I forgot to mention there are extension methods in XCalendar.Core.Extensions that allow you to get the first or last days of the week of a DateTime for your exact use case.

For example

data.FromDate = DateTime.FirstDayOfWeek(firstDayOfWeek);

data.ToDate = DateTime.LastDayOfWeek(firstDayOfWeek);