How to show a .NET MAUI Calendar in the Popup window?
In the Syncfusion® .NET MAUI Calendar control, you can add the SfCalendar to the Popup view through the following steps.
Step 1: Open the NuGet package manager in Visual Studio, and search for CommunityToolkit.Maui, and then install it.
Step 2:
Register the handler for .NET MAUI Community Toolkit in the MauiProgram.cs file.
C#
using CommunityToolkit.Maui;
namespace PopupCalendar;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
return builder.Build();
}
}
Step 3: Create a new ContentPage (XAML) and name it CalendarPopupPage, as shown below.
Step 4: Define the newly created CalendarPopupPage as your Popup page by referring to the following link.
Step 5: Set the CanBeDismissedByTappingOutsideOfPopup to true if you want the Popup to be dismissed by tapping outside the Popup.
XAML
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" xmlns:calendar="clr-namespace:Syncfusion.Maui.Calendar;assembly=Syncfusion.Maui.Calendar" x:Class="PopupCalendar.CalendarPopupPage" CanBeDismissedByTappingOutsideOfPopup="True"> </toolkit:Popup>
Step 6: Add the Button control and the SfCalendar control in your CalendarPopupPage.
XAML
<Grid RowDefinitions="0.1*, 0.9*" Background="White"> <Button x:Name="SelectionModeButton" HorizontalOptions="Center" VerticalOptions="Center" Text="Single" Clicked="SelectionModeButton_Clicked" /> <calendar:SfCalendar Grid.Row="1" x:Name="calendar" ShowActionButtons="True" /> </Grid>
Step 7: In the Button.Clicked event handler (at the CalendarPopupPage.xaml.cs), change the SelectionMode to Single (or) Range.
C#
private void SelectionModeButton_Clicked(object sender, EventArgs e)
{
if (this.calendar.SelectionMode == CalendarSelectionMode.Single)
{
this.calendar.SelectionMode = CalendarSelectionMode.Range;
this.SelectionModeButton.Text = "Range";
}
else
{
this.calendar.SelectionMode = CalendarSelectionMode.Single;
this.SelectionModeButton.Text = "Single";
}
}
Step 8: Add the Button control in the MainPage.
XAML
<Grid > <Button x:Name="CalendarButton" HorizontalOptions="Center" VerticalOptions="Center" Text="Show Calendar" Clicked="CalendarButton_Clicked"/> </Grid>
Step 9: In the Button.Clicked event handler (at the MainPage.xaml.cs), invoke the ShowPopup() method to display the Popup.
C#
private void CalendarButton_Clicked(object sender, EventArgs e)
{
this.ShowPopup(new CalendarPopupPage());
}Download the complete sample on GitHub
Output:
Conclusion:
I hope you enjoyed learning how to add the .NET MAUI Calendar (SfCalendar) to a Popup view.
You can refer to our .NET MAUI Calendar's feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Calendar documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
