How to Get the Selected Dates using the Selection Changed Callback in the .NET MAUI Calendar (SfCalendar)?
In the Syncfusion .NET MAUI Calendar, get the selected date details of the SfCalendar 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, change the text of the Button and the SelectionMode property of the SfCalendar to Single, (or) Multiple, (or) Range based on conditions as shown in the following code sample.
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: In the SfCalendar’s SelectionChanged event, 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");
}
}
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!
