Get Started with DevExpress Calendar for .NET MAUI

Aug 07, 2024
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:

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

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.
In the MauiProgram.cs file, call the the following UseDevExpress * methods to register handlers for the DevExpress Scheduler Control:
In the MainPage.xaml file, declare the dx XAML namespace and add a DXCalendar to a content page:

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.

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

xml

<dx: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

xml

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