Advanced Date Customization in .NET MAUI Calendar Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (26).NET MAUI  (234)Angular  (115)ASP.NET  (49)ASP.NET Core  (80)ASP.NET MVC  (85)Azure  (42)Black Friday Deal  (1)Blazor  (243)BoldSign  (15)DocIO  (24)Essential JS 2  (108)Essential Studio  (198)File Formats  (73)Flutter  (141)JavaScript  (227)Microsoft  (121)PDF  (86)Python  (1)React  (107)Streamlit  (1)Succinctly series  (131)Syncfusion  (990)TypeScript  (32)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (54)Windows Forms  (59)WinUI  (72)Word  (18)WPF  (165)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (155)Chart of the week  (62)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (697)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (47)Extensions  (31)File Manager  (8)Gantt  (23)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (532)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (48)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (428)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (651)What's new  (355)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Advanced Date Customization in .NET MAUI Calendar Control

Advanced Date Customization in .NET MAUI Calendar Control

Syncfusion .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.

.NET MAUI Calendar
.NET MAUI Calendar

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 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 FirstDayOfWeekproperty in the Calendar.

You can also customize the current month date’s text and background using the TextStyle and Background properties of the MonthView.

Refer to the following code example.

SfCalendar calendar = new SfCalendar();
calendar.MonthView.TextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
this. Content = calendar;
Customizing the Current Month's Dates in the .NET MAUI Calendar
Customizing the Current Month’s Dates in the .NET MAUI Calendar

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 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 and TrailingLeadingDatesBackground properties of the MonthView.

Refer to the following code example.

SfCalendar calendar = new SfCalendar();
calendar.MonthView.TrailingLeadingDatesTextStyle = new CalendarTextStyle()
{
   TextColor = Colors.Red
};
this. Content = calendar;
Customizing the Trailing and Leading Dates in the .NET MAUI Calendar
Customizing the Trailing and Leading Dates in the .NET MAUI Calendar

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 property of the MonthView.

The Calendar also supports highlighting or customizing the month weekend dates text and background using the WeekendDatesTextStyle and WeekendDatesBackground properties of the MonthView.

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.

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;
Customizing Weekend Dates in .NET MAUI Calendar
Customizing Weekend Dates in .NET MAUI Calendar

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 property.

You can also customize the text and background of today’s date using the TodayTextStyle and TodayBackground properties of MonthView.

Refer to the following code example.

SfCalendar calendar = new SfCalendar();
calendar.MonthView.TodayTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
calendar.TodayHighlightBrush = Brush.Red;
this. Content = calendar;
Customizing Today's Date in .NET MAUI Calendar
Customizing Today’s Date in .NET MAUI Calendar

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 and MaximumDate properties.

The .NET MAUI Calendar also supports customizing the disabled month dates text and background using the DisabledDatesTextStyle and DisabledDatesBackground properties of the MonthView.

Refer to the following code example.

SfCalendar calendar = new SfCalendar();
calendar.MonthView.DisabledDatesTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Red
};
calendar.MinimumDate = DateTime.Now;
this. Content = calendar;
Customizing the Disabled Dates in the .NET MAUI Calendar
Customizing the Disabled Dates in the .NET MAUI Calendar

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 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 and DisabledDatesBackground properties of the MonthView.

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

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;
Customizing the Blackout dates in .NET MAUI Calendar
Customizing the Blackout dates in .NET MAUI Calendar

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 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 and SpecialDatesBackground properties of MonthView.

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 SpecialDayPredicateproperty.

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

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;
Customizing Special Date in .NET MAUI Calendar
Customizing Special Date in .NET MAUI Calendar

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: 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: 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: Used to customize the selected range start date highlight for the range selection mode of the calendar.
  • EndRangeSelectionBackground: Used to customize the selected range end date highlight for the range selection mode of the calendar.
  • RangeTextStyle: Used to customize the selected date range text style.

Refer to the following code example.

SfCalendar calendar = new SfCalendar();
calendar.MonthView.SelectionTextStyle = new CalendarTextStyle()
{
   TextColor = Colors.Yellow,
};
calendar.SelectionBackground = Brush.Red;
this. Content = calendar;
Customizing a Selected Date in .NET MAUI Calendar
Customizing a Selected Date in .NET MAUI Calendar

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. You can also explore other features in the Calendar control in its documentation. Please try the .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 to see how our components can enhance your projects. You can also contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed