Get Started with DevExpress Calendar for .NET MAUI

• Nov 17, 2023
• 2 minutes to read

The DevExpress Mobile UI for .NET MAUI suite contains a calendar that allows your users to select a date in an application. You can highlight holidays, observances, and any other specific days in the year.

This tutorial explains how to create a DXCalendar instance and highlight holidays. The complete example is available on GitHub.

View Example: Get Started with DevExpress Calendar for .NET MAUI

Prerequisites

Refer to the following pages before you proceed with this Getting Started lesson:

• Microsoft .NET Multi-platform App UI documentation
• .NET MAUI and DevExpress Mobile UI Supported Platforms
• Requirements for .NET MAUI and DevExpress Mobile UI
• Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)

Create a New Application and Place a Calendar on the Main Page

1. Create a new .NET MAUI cross-platform solution (for example, Calendar_GettingStarted) and install the DevExpress.Maui.Editors NuGet package. See the following topic for more information: Register DevExpress NuGet Gallery to Access Mobile UI for .NET MAUI.

   Tip

   You can also use DevExpress Project Templates to create a new application. See the following topic for more information: CLI Project Templates.

2. In the MainPage.xaml file, declare the dxe XAML namespace and add a DXCalendar to a content page:

   Xaml

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
                xmlns:local="clr-namespace:Calendar_GettingStarted"
                x:Class="Calendar_GettingStarted.MainPage">
       <dxe:DXCalendar/>
   </ContentPage>
   

Highlight Holidays

Handle the CustomDayCellAppearance event as shown below to highlight holidays. The event arguments allow you to specify background and foreground colors, and font attributes.

C#

using DevExpress.Maui.Editors;

void CustomDayCellAppearance(object sender, CustomSelectableCellAppearanceEventArgs e) {
    if (e.Date.Month == 2 && e.Date.Day == 14) {
        e.FontAttributes = FontAttributes.Bold;
        e.EllipseBackgroundColor = Color.FromRgba(e.TextColor.Red, e.TextColor.Green, e.TextColor.Blue, 0.15);
    }

    if (e.Date.Month == 2 && e.Date.Day == 21) {
        e.FontAttributes = FontAttributes.Bold;
        Color textColor = Color.FromArgb("F44848");
        e.EllipseBackgroundColor = Color.FromRgba(textColor.Red, textColor.Green, textColor.Blue, 0.25);
        e.TextColor = textColor;
    }
}

XAML

<dxe:DXCalendar CustomDayCellAppearance="CustomDayCellAppearance"/>

Specify Custom Appearance Settings

Use the HeaderAppearance, DayCellAppearance, and DayOfWeekCellAppearance properties to specify custom colors and fonts for the calendar’s header, days, and days of the week.

XAML

<dxe:DXCalendar>
    <dxe:DXCalendar.HeaderAppearance>
        <dxe:CalendarHeaderAppearance TextColor="#F44848"/>
    </dxe:DXCalendar.HeaderAppearance>
    <dxe:DXCalendar.DayCellAppearance>
        <dxe:CalendarDayCellAppearance FontAttributes="Bold,Italic"
                                       TextColor="Black"/>
    </dxe:DXCalendar.DayCellAppearance>
    <dxe:DXCalendar.DayOfWeekCellAppearance>
        <dxe:CalendarDayOfWeekCellAppearance FontAttributes="Bold,Italic"
                                             TextColor="Black"/>
    </dxe:DXCalendar.DayOfWeekCellAppearance>
</dxe:DXCalendar>