calendar-week-range-selection.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
How to Select Week Range in the .NET MAUI Calendar	Learn how to configure the .NET MAUI Calendar and enable the user to select a week from the Calendar when tapping on a day.	how-to	Week Selection in the .NET MAUI Calendar	calendar-week-range-selection		calendar, dotnet, maui, week selection, range selection	1627503	kb

Environment

Version	Product	Author
6.6.0	Calendar for .NET MAUI	Dobrinka Yordanova

Description

This article shows how to select a week in the Calendar for .NET MAUI when tapping or clicking on a date from this week. In the end, you will receive the following result:

Solution

To achieve the desired result, define a Calendar, and then handle the SelectionChanged event:

1. Define the Calendar in XAML:

<Grid>
    <telerik:RadCalendar x:Name="calendar"
                            HorizontalOptions="Center" 
                            VerticalOptions="Center"
                            SelectionMode="Range"
                            SelectionChanged="OnCalendarSelectionChanged" />
</Grid>

2. Handle the SelectionChanged event to get the first day of the week, and then select the range for the whole week.

public partial class MainPage : ContentPage
{
    private bool isInternalSelection = false;

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnCalendarSelectionChanged(object sender, Telerik.Maui.Controls.Calendar.CalendarSelectionChangedEventArgs e)
    {
        if (this.isInternalSelection)
        {
            return;
        }

        var selectedDate = e.AddedDates.First();
        var culture = this.calendar.Culture ?? CultureInfo.CurrentCulture;
        var firstDayOfWeek = this.calendar.FirstDayOfWeek ?? culture.DateTimeFormat.FirstDayOfWeek;

        var rangeStart = this.GetFirstDayOfWeek(selectedDate, firstDayOfWeek);
        var rangeEnd = rangeStart.AddDays(6);

        var selectedDates = (CalendarSelectionCollection)this.calendar.SelectedDates;

        this.isInternalSelection = true;
        selectedDates.AddRange(rangeStart, rangeEnd);
        this.isInternalSelection = false;
    }

    private DateTime GetFirstDayOfWeek(DateTime dateTime, DayOfWeek weekStart)
    {
        var selectedDay = (int)dateTime.DayOfWeek;
        if (selectedDay < (int)weekStart)
        {
            selectedDay += 7;
        }

        int daysToSubtract = selectedDay - (int)weekStart;
        DateTime result = dateTime.AddDays(-daysToSubtract);
        return result;
    }
}