How to Get the Selected Dates using the Selection Changed Callback in the .NET MAUI Calendar (SfCalendar)?
In the Syncfusion® .NET MAUI Calendar, you can obtain selected date details using the selection changed callback through the following steps.
Step 1: Add the SfCalendar and Button control to your layout as shown in the following code sample.
XAML
<ContentPage.Behaviors> <local:CalendarBehavior /> </ContentPage.Behaviors> <ContentPage.Content> <Grid RowDefinitions="0.1*, 0.9*"> <Button x:Name="selectionModeButton" HorizontalOptions="Center" VerticalOptions="Center" /> <calendar:SfCalendar Grid.Row="1" x:Name="calendar" /> </Grid> </ContentPage.Content>
Step 2: In the Button.Clicked event, update the button text and change the SelectionMode property of the SfCalendar between Single, Multiple, and Range.
C#
private void SelectionModeButton_Clicked(object sender, EventArgs e)
{
if (this.calendar.SelectionMode == CalendarSelectionMode.Single)
{
this.calendar.SelectionMode = CalendarSelectionMode.Multiple;
this.selectionModeButton.Text = this.calendar.SelectionMode.ToString();
}
else if (this.calendar.SelectionMode == CalendarSelectionMode.Multiple)
{
this.calendar.SelectionMode = CalendarSelectionMode.Range;
this.selectionModeButton.Text = this.calendar.SelectionMode.ToString();
}
else
{
this.calendar.SelectionMode = CalendarSelectionMode.Single;
this.selectionModeButton.Text = this.calendar.SelectionMode.ToString();
}
}
Step 3: Use the DisplayAlert() method to display the selected date details based on different SelectionMode(s) of the SfCalendar as shown in the following code sample.
C#
private void Calendar_SelectionChanged(object sender, CalendarSelectionChangedEventArgs e)
{
if (this.calendar.SelectionMode == CalendarSelectionMode.Single)
{
App.Current.MainPage.DisplayAlert("Date selected", ((DateTime)e.NewValue).ToString("dd MMMM yyyy"), "OK");
}
else if (this.calendar.SelectionMode == CalendarSelectionMode.Multiple)
{
var newDate = (ReadOnlyObservableCollection<DateTime>)e.NewValue;
var oldDate = (ReadOnlyObservableCollection<DateTime>)e.OldValue;
string newDateList = string.Empty;
foreach (var item in newDate)
{
newDateList += item.ToString("dd/MM/yyyy") + "\n";
}
if (newDate.Count > oldDate.Count)
{
App.Current.MainPage.DisplayAlert("Date selected: " + newDate.ElementAt(newDate.Count - 1).ToString("dd MMMM yyyy"),
"Count: " + newDate.Count.ToString() + "\n" + newDateList, "OK");
}
else
{
foreach (var item in oldDate)
{
if (!newDate.Contains(item))
{
App.Current.MainPage.DisplayAlert("Date deselected: " + item.ToString("dd MMMM yyyy"),
"Count: " + newDate.Count.ToString() + "\n" + newDateList, "Ok");
}
}
}
}
else
{
var startDate = (DateTime)this.calendar.SelectedDateRange.StartDate;
var endDate = (DateTime)((this.calendar.SelectedDateRange.EndDate != null) ? this.calendar.SelectedDateRange.EndDate : this.calendar.SelectedDateRange.StartDate);
App.Current.MainPage.DisplayAlert("StartDate: " + startDate.ToString("dd/MM/yyyy"),
"EndDate: " + endDate.ToString("dd/MM/yyyy"), "OK");
}
}
Download the complete sample on GitHub
Output:
Conclusion
I hope you enjoyed learning how to get the selected date details using the selection changed callback in the .NET MAUI Calendar (SfCalendar).
Refer to our .NET MAUI Calendar’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Calendar documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components.
Please let us know in the comments section below if you have any queries or require clarifications. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
