Advanced Date Customization in .NET MAUI Calendar Control
Tags: dotnetmaui, mobile, calendar, ui
Published: 2023-09-20 07:08:25

---
title: Advanced Date Customization in .NET MAUI Calendar Control
published: true
date: 2023-09-19 12:38:32 UTC
tags: dotnetmaui, mobile, calendar, ui
canonical_url: https://www.syncfusion.com/blogs/post/advanced-date-customization-dotnet-maui-calendar.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ii19e8usv5q7rvcvxwn.png
---
Syncfusion [.NET MAUI Calendar](https://www.syncfusion.com/maui-controls/maui-calendar ".NET MAUI Calendar") control is used to display and select dates. It also handles and considers different types of dates, offering various customization options. Users can create versatile and user-friendly date selection experiences that cater to various app scenarios by understanding these multiple date types.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Calendar-1.png" alt=".NET MAUI Calendar" style="width:100%">

  <figcaption>.NET MAUI Calendar</figcaption>

</figure>

In this blog, we’ll explore the different types of dates and their customization options available in the .NET MAUI Calendar control.

**Note:** If you are new to this control, please refer to the [.NET MAUI Calendar getting started](https://help.syncfusion.com/maui/calendar/getting-started "Getting started with .NET MAUI Calendar") documentation before proceeding.

## Current month dates: exploring dates within the present month

Current month dates fall within the current month displayed in the .NET MAUI Calendar. These dates represent the days of the current month, ranging from the first day to the last day of the month. You can customize the default first day of the week (Sunday) based on your needs using the [FirstDayOfWeek](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_FirstDayOfWeek "FirstDayOfWeek property of .NET MAUI Calendar")property in the Calendar.

You can also customize the current month date’s text and background using the [TextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_TextStyle "TextStyle property of .NET MAUI Calendar")and [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_Background "Background property of .NET MAUI Calendar") properties of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

Refer to the following code example.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.TextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-the-Current-Months-Dates-in-the-.NET-MAUI-Calendar.png" alt="Customizing the Current Month's Dates in the .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing the Current Month's Dates in the .NET MAUI Calendar</figcaption>

</figure>

## Neighbor month dates

The neighbor month dates denote the dates from the trailing (inclusion of the past) and leading (extension into the future) month dates displayed alongside the current month dates in the Calendar. The previous and next month’s dates will vary based on the specified first day of the week in the calendar.

The visibility of the neighbor month dates can be customized by using the [ShowTrailingAndLeadingDates](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_ShowTrailingAndLeadingDates "ShowTrailingAndLeadingDates property of .NET MAUI Calendar") property. Including the neighbor month dates improves usability and provides a broader view of the current month. By default, the .NET MAUI Calendar displays the neighbor month dates with a faded style to differentiate them from the current month dates.

You can customize the neighbor month dates text and background using the [TrailingLeadingDatesTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_TrailingLeadingDatesTextStyle "TrailingLeadingDatesTextStyle property of .NET MAUI Calendar") and [TrailingLeadingDatesBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_TrailingLeadingDatesBackground "TrailingLeadingDatesBackground property of .NET MAUI Calendar") properties of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

Refer to the following code example.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.TrailingLeadingDatesTextStyle = new CalendarTextStyle()
{
   TextColor = Colors.Red
};
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-the-Trailing-and-Leading-Dates-in-the-.NET-MAUI-Calendar.png" alt="Customizing the Trailing and Leading Dates in the .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing the Trailing and Leading Dates in the .NET MAUI Calendar</figcaption>

</figure>

## Weekends

Weekend dates fall on Saturdays and Sundays within a shown month of the calendar. The .NET MAUI Calendar supports changing the default weekend days using the [WeekendDays](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_WeekendDays "WeekendDays property of .NET MAUI Calendar") property of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

The Calendar also supports highlighting or customizing the month weekend dates text and background using the [WeekendDatesTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_WeekendDatesTextStyle "WeekendDatesTextStyle property of .NET MAUI Calendar") and [WeekendDatesBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_WeekendDatesBackground "WeekendDatesBackground property of .NET MAUI Calendar") properties of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

**Note:** If the user does not provide the custom text style and background for the weekend dates, the Calendar control will render the weekend dates based on the current and neighbor month dates styles.

Refer to the following code example.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.WeekendDatesTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
        
calendar.MonthView.WeekendDays = new List<DayOfWeek> { DayOfWeek.Sunday, DayOfWeek.Saturday };
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Weekend-Dates-in-.NET-MAUI-Calendar-1.png" alt="Customizing Weekend Dates in .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing Weekend Dates in .NET MAUI Calendar</figcaption>

</figure>

## Today

Today’s month date provides a point of reference for users. The date is highlighted by a border based on the selection shape in the calendar to distinguish today’s date from other dates. You can change the default color of today using the [TodayHighlightBrush](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_TodayHighlightBrush "TodayHighlightBrush property of .NET MAUI Calendar") property.

You can also customize the text and background of today’s date using the [TodayTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_TodayTextStyle "TodayTextStyle property of .NET MAUI Calendar")and [TodayBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_TodayBackground "TodayBackground property of .NET MAUI Calendar") properties of [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

Refer to the following code example.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.TodayTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
calendar.TodayHighlightBrush = Brush.Red;
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Todays-Date-in-.NET-MAUI-Calendar-1.png" alt="Customizing Today's Date in .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing Today's Date in .NET MAUI Calendar</figcaption>

</figure>

## Disabled dates: limiting the selection

Disabled dates refer to the dates that are not considered valid because the dates fall before the minimum supported date or after the maximum supported date of the calendar. These dates restrict user interaction for the selection. By default, the calendar displays the disabled dates in a faded style to differentiate them from valid month dates.

You can customize the valid date range using the [MinimumDate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_MinimumDate "MinimumDate property of .NET MAUI Calendar") and [MaximumDate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_MaximumDate "MaximumDate property of .NET MAUI Calendar") properties.

The .NET MAUI Calendar also supports customizing the disabled month dates text and background using the [DisabledDatesTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_DisabledDatesTextStyle "DisabledDatesTextStyle property of .NET MAUI Calendar") and [DisabledDatesBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_DisabledDatesBackground "DisabledDatesBackground property of .NET MAUI Calendar") properties of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

Refer to the following code example.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.DisabledDatesTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
calendar.MinimumDate = DateTime.Now;
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-the-Disabled-Dates-in-the-.NET-MAUI-Calendar.png" alt="Customizing the Disabled Dates in the .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing the Disabled Dates in the .NET MAUI Calendar</figcaption>

</figure>

## Blackout month dates: restricting the selection

Blackout dates refer to the dates that are unavailable or restricted for selection. They are commonly used in apps such as event booking systems, reservation platforms, and scheduling tools to restrict booking or scheduling.

The .NET MAUI Calendar supports specifying the blackout dates by using the [SelectableDayPredicate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_SelectableDayPredicate "SelectableDayPredicate property of .NET MAUI Calendar") property. By default, the Calendar displays the blackout dates similarly to disabled dates.

You can also customize the blackout month dates text and background using the [DisabledDatesTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_DisabledDatesTextStyle "DisabledDatesTextStyle property of .NET MAUI Calendar") and [DisabledDatesBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_DisabledDatesBackground "DisabledDatesBackground property of .NET MAUI Calendar") properties of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

Refer to the following code example. Here, the dates 19 and 20 of June 2023 are marked as blackout dates.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.DisabledDatesTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
calendar.SelectableDayPredicate = (date) =>
{
    if (date.Date == DateTime.Now.AddDays(2).Date || date.Date == DateTime.Now.AddDays(3).Date)
        return false;
        return true;
};
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-the-Blackout-dates-in-.NET-MAUI-Calendar-1.png" alt="Customizing the Blackout dates in .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing the Blackout dates in .NET MAUI Calendar</figcaption>

</figure>

## Special month dates: highlighting dates

Special dates refer to dates that need to be highlighted for special occasions such as birthdays, anniversaries, and other important events. They are used to enhance the user experience by providing recognition for essential occasions.

The .NET MAUI Calendar control supports specifying special dates using the [SpecialDayPredicate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_SpecialDayPredicate "SpecialDayPredicate property of .NET MAUI Calendar") property. Also, it offers options to specify icon shapes—such as Bell, Diamond, Dot, Heart, Square, Star, and Triangle icons—and the color of the icons.

You can customize the text of special month dates and backgrounds using the [SpecialDatesTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_SpecialDatesTextStyle "SpecialDatesTextStyle property of .NET MAUI Calendar") and [SpecialDatesBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_SpecialDatesBackground "SpecialDatesBackground property of .NET MAUI Calendar") properties of [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html "CalendarMonthView class of .NET MAUI Calendar").

**Note:** If the user does not wish to add an icon for special dates, they need to set the icon details color as transparent in the [SpecialDayPredicate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMonthView.html#Syncfusion_Maui_Calendar_CalendarMonthView_SpecialDayPredicate "SpecialDayPredicate property of .NET MAUI Calendar")property.

Refer to the following code example. Here, the date 21 of June 2023 is marked as a special day.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.SpecialDatesTextStyle = new CalendarTextStyle()
{
   TextColor = Colors.Red
};

calendar.MonthView.SpecialDayPredicate = (date) =>
{
   if (date.Date == DateTime.Now.AddDays(4).Date)
      return new CalendarIconDetails() { Icon = CalendarIcon.Dot };
   else if (date.Date == DateTime.Now.AddDays(5).Date)
      return new CalendarIconDetails() { Fill = Brush.Transparent };
   return null;
};
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Special-Date-in-.NET-MAUI-Calendar-1.png" alt="Customizing Special Date in .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing Special Date in .NET MAUI Calendar</figcaption>

</figure>

## Selected month dates: highlight selection

A selected date on the calendar refers to a specific date a user has chosen or highlighted as their desired date of selection. The selected date is shown as a single date, multiple dates, or a range of dates based on the selection mode of the calendar. These dates are marked with a filled highlight. You can customize the text and highlight the selected month dates using the following properties:

- [SelectionBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_SelectionBackground "SelectionBackground property of .NET MAUI Calendar"): Used to customize the selected date highlight for single and multiple selection modes and customize the in-between range dates highlight for the range selection mode of the calendar.
- [SelectionTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarYearView.html?tabs=tabid-2#Syncfusion_Maui_Calendar_CalendarYearView_SelectionTextStyle "SelectionTextStyle property of .NET MAUI Calendar"): Used to customize the selected date text style for single and multiple selection modes and customize the selected range start and end dates text style for the range selection mode of the calendar.
- [StartRangeSelectionBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_StartRangeSelectionBackground "StartRangeSelectionBackground property of .NET MAUI Calendar"): Used to customize the selected range start date highlight for the range selection mode of the calendar.
- [EndRangeSelectionBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_EndRangeSelectionBackground "EndRangeSelectionBackground property of .NET MAUI Calendar"): Used to customize the selected range end date highlight for the range selection mode of the calendar.
- [RangeTextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarYearView.html?tabs=tabid-2#Syncfusion_Maui_Calendar_CalendarYearView_RangeTextStyle "RangeTextStyle property of .NET MAUI Calendar"): Used to customize the selected date range text style.

Refer to the following code example.

```csharp
SfCalendar calendar = new SfCalendar();
calendar.MonthView.SelectionTextStyle = new CalendarTextStyle()
{
   TextColor = Colors.Yellow,
};
calendar.SelectionBackground = Brush.Red;
this. Content = calendar;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-a-Selected-Date-in-.NET-MAUI-Calendar-1.png" alt="Customizing a Selected Date in .NET MAUI Calendar" style="width:100%">

  <figcaption>Customizing a Selected Date in .NET MAUI Calendar</figcaption>

</figure>

## Conclusion

Thanks for reading! In this blog, we’ve seen the different types of dates and their customization options available in the [.NET MAUI Calendar](https://www.syncfusion.com/maui-controls/maui-calendar ".NET MAUI Calendar"). You can also explore other features in the Calendar control in its [documentation](https://help.syncfusion.com/maui/calendar/overview "Getting started with .NET MAUI Calendar"). Please try the [.NET MAUI demos on GitHub](https://github.com/syncfusion/maui-demos ".NET MAUI demos on GitHub") and share your feedback or ask questions in the comments section.

If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get the free evaluation of Essential Studio products") to see how our components can enhance your projects. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/home "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Introducing the 9th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/whats-new-dotnet-maui-2.aspx "Blog: Introducing the 9th Set of New .NET MAUI Controls and Features")
- [What’s New in 2023 Volume 3: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/whats-new-dotnet-maui-chart.aspx "Blog: What’s New in 2023 Volume 3: .NET MAUI Charts")
- [The Ultimate Patient Appointment Manager App in .NET MAUI](https://www.syncfusion.com/blogs/post/patient-appointment-app-dotnet-maui.aspx "Blog: The Ultimate Patient Appointment Manager App in .NET MAUI")
- [Mastering Globalization: Utilizing Calendar Types in .NET MAUI Calendar Control](https://www.syncfusion.com/blogs/post/globalization-in-dotnet-maui-calendar.aspx "Blog: Mastering Globalization: Utilizing Calendar Types in .NET MAUI Calendar Control")