Month View in .NET MAUI Scheduler (SfScheduler)

29 Dec 20215 minutes to read

By default, the Month view displays the entire days of a particular month and current month initially. The current date color is differentiated from other dates of the current month, and also the color differentiation for dates will be applicable for the previous and next month dates.

By default, when an appointment is tried to create through Month view, it is considered to be created for an entire day.

Appointment display mode

The scheduler month view appointment display can be handled by using the AppointmentDisplayMode property of MonthViewSettings. By default, AppointmentDisplayMode is set to Text, using the AppointmentDisplayMode.

You can set the month view appointments display as follows.

  • None: Appointment will not be displayed.
  • Indicator: Appointment will be denoted as the circle.
  • Text: Appointment subject will be displayed in the month cell.
<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Month">
    <scheduler:SfScheduler.MonthViewSettings>
        <scheduler:SchedulerMonthViewSettings  
            AppointmentDisplayMode="Indicator"/>
    </scheduler:SfScheduler.MonthViewSettings>
</scheduler:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthViewSettings.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;

change-appointment-display-mode-in-maui-scheduler

NOTE

Hide leading and trailing dates

The previous and next month dates from a Scheduler month view can be hidden by using the ShowLeadingAndTrailingDates property in the MonthViewSettings of the SfScheduler. The ShowLeadingAndTrailingDates property defaults to true.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Month">
    <scheduler:SfScheduler.MonthViewSettings>
        <scheduler:SchedulerMonthViewSettings  
            ShowLeadingAndTrailingDates="False"/>
    </scheduler:SfScheduler.MonthViewSettings>
</scheduler:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthViewSettings.ShowLeadingAndTrailingDates = false;

show-or-hide-leading-and-trailing-days-appearence-customization-in-maui-scheduler

Change day format of view header

Customize the day format of Scheduler view header by using the DayFormat property of ViewHeaderSettings in MonthViewSettings.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Month">
</scheduler:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthViewSettings.ViewHeaderSettings.DayFormat = "dddd";

change-day-text-format-of-month-view-header-in-maui-scheduler

Customize view header appearance

Customize the month view header day text style, day format and background color by using the DayTextStyle, DayFormat and Background of ViewHeaderSettings properties of MonthViewSettings respectively.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Month">
</scheduler:SfScheduler>
var dayTextStyle = new SchedulerTextStyle()
{
    TextColor = Colors.DarkBlue,
    FontSize = 14,
};
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthViewSettings.ViewHeaderSettings.Background = Brush.LightSkyBlue;
this.Scheduler.MonthViewSettings.ViewHeaderSettings.DayFormat = "dddd";
this.Scheduler.MonthViewSettings.ViewHeaderSettings.DayTextStyle = dayTextStyle;

customize-day-text-format-appearence-of-month-view-header-in-maui-scheduler

Customize month cell appearance

By using the MonthCellStyle property of MonthViewSettings, the month properties such as Background, TodayBackground, TrailingMonthBackground, LeadingMonthBackground, TextStyle, TrailingMonthTextStyle, and LeadingMonthTextStyle can be customized.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Month">
</scheduler:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
var textStyle = new SchedulerTextStyle()
{
    TextColor = Colors.DarkBlue,
    FontSize = 14,
};

var leadingMonthTextStyle = new SchedulerTextStyle()
{
    TextColor = Colors.Red,
    FontSize = 14,
};
            
var trailingMonthTextStyle = new SchedulerTextStyle()
{
    TextColor = Colors.Red,
    FontSize = 14,
};

var monthCellStyle = new SchedulerMonthCellStyle()
{
    Background = Brush.LightSkyBlue,
    TodayBackground = Brush.LightBlue,
    LeadingMonthBackground = Brush.LightGreen,
    TrailingMonthBackground = Brush.LightYellow,
    TextStyle = textStyle,
    LeadingMonthTextStyle = leadingMonthTextStyle,
    TrailingMonthTextStyle = trailingMonthTextStyle
};

this.Scheduler.MonthViewSettings.MonthCellStyle = monthCellStyle;

customize-month-cell-appearance-in-maui-scheduler