Month View in .NET MAUI Scheduler (SfScheduler)

7 Jul 202624 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.

NOTE

The appointment views for each month cells will be updated depends on the month cells height. While resizing the layout, the following actions would be performed,

Appointment display mode

The scheduler month view appointment display can be handled by using the AppointmentDisplayMode property of MonthView. 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.MonthView>
        <scheduler:SchedulerMonthView 
                       AppointmentDisplayMode="Indicator"/>
    </scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
this.Content = scheduler;

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

NOTE

Appointment indicator count

The scheduler month view appointment indicator count allows you to customize the count of the appointment indicator by using the AppointmentIndicatorCount property of the MonthView. By default, the AppointmentIndicatorCount is set to 5.

<schedule:SfScheduler x:Name="Scheduler"
                        View="Month" >
    <schedule:SfScheduler.MonthView>
        <schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" 
                                     AppointmentIndicatorCount="2"/>
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
this.Scheduler.MonthView.AppointmentIndicatorCount = 1;

change-appointment-indicator-count-in-maui-scheduler

Appointment indicator size

The scheduler month view allows you to customize the size of the appointment indicator by using the AppointmentIndicatorSize property of the MonthView. By default, the AppointmentIndicatorSize is set to 6d.

<schedule:SfScheduler x:Name="Scheduler"
                        View="Month" >
        <schedule:SfScheduler.MonthView>
            <schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" AppointmentIndicatorSize="10"/>
        </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
this.Scheduler.MonthView.AppointmentIndicatorSize = 10;

change-appointment-indicator-size-in-maui-scheduler

Appointment indicator renderer mode

The scheduler month view allows you to customize the appointment indicator rendering mode by using the AppointmentIndicatorRenderMode property of the MonthView. The AppointmentIndicatorRenderMode property supports three different types: Fill, Stroke and FillAndStroke. By default, the AppointmentIndicatorRenderMode is set to Fill.

<schedule:SfScheduler x:Name="Scheduler"
                        View="Month" >
        <schedule:SfScheduler.MonthView>
            <schedule:SchedulerMonthView AppointmentIndicatorRenderMode="Stroke" AppointmentDisplayMode="Indicator" AppointmentIndicatorSize="15" AppointmentIndicatorCount="2" />
        </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.Stroke;
this.Scheduler.MonthView.AppointmentIndicatorSize = 15;
this.Scheduler.MonthView.AppointmentIndicatorCount = 2;

appointment-renderer-mode-stroke-maui-scheduler

Appointment indicator stroke thickness

The scheduler month view allows you to customize the appointment indicator stroke thickness by using the AppointmentIndicatorStrokeThickness property of the MonthView. By default, the AppointmentIndicatorStrokeThickness is set to 1d.

<schedule:SfScheduler x:Name="Scheduler"
                        View="Month" >
        <schedule:SfScheduler.MonthView>
            <schedule:SchedulerMonthView AppointmentIndicatorStrokeThickness="4" AppointmentDisplayMode="Indicator" AppointmentIndicatorSize="20" AppointmentIndicatorRenderMode="Stroke" />
        </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.Stroke;
this.Scheduler.MonthView.AppointmentIndicatorSize = 20;
this.Scheduler.MonthView.AppointmentIndicatorStrokeThickness = 4;

appointment-indicator-stroke-thickness-maui-scheduler

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 MonthView. The ShowLeadingAndTrailingDates property defaults to true.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView  
                       ShowLeadingAndTrailingDates="False"/>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.ShowLeadingAndTrailingDates = false;
this.Content = scheduler;

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

Date text positioning in Month view

The DateHorizontalAlignment property specifies how the date text is aligned horizontally within each cell of the scheduler’s Month view. Its default value is Center, but you can set it to Left, Right or Justified to adjust the placement of the date numbers.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView DateHorizontalAlignment="Left"/>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.DateHorizontalAlignment = HorizontalAlignment.Left;
this.Content = scheduler;

Horizontal-date-text-alignment-in-month-view

Number of weeks visible in the month view

The number of week visible in the month view can be changed by setting the NumberOfVisibleWeeks property in the MonthView.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView  
                       NumberOfVisibleWeeks="2"/>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.NumberOfVisibleWeeks = 2;
this.Content = scheduler;

visible-weeks-count-in-maui-scheduler-month-view

Non working days in month view

The scheduler allows you to define non-working days in the Month view using the NonWorkingDays property. This helps highlight weekends or specific days of the week as non-working, making it easier to distinguish them from working days. By default, no days are marked as non-working. The default value of NonWorkingDays property is SchedulerMonthWeekDays.None. You can configure this property to include one or more days of the week.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView NonWorkingDays="Saturday,Sunday"/>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.NonWorkingDays = SchedulerMonthWeekDays.Saturday | SchedulerMonthWeekDays.Sunday;
this.Content = scheduler;

Show or Hide non working days in Month View

The HideNonWorkingDays property is used to control the visibility of non-working days in the Month view. When HideNonWorkingDays is false (default), the specified non-working days are displayed in the MonthView. When HideNonWorkingDays is true, the specified non-working days are hidden from the MonthView.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView NonWorkingDays="Saturday,Sunday" HideNonWorkingDays="True"/>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.NonWorkingDays = SchedulerMonthWeekDays.Saturday | SchedulerMonthWeekDays.Sunday;
scheduler.MonthView.HideNonWorkingDays = true;
this.Content = scheduler;

Hide-non-working-days-in-month-view

Customize Non-Working Days in Month View

Non-working days in the MonthView can be customized using the NonWorkingDaysBackground and NonWorkingDaysTextStyle properties of the SchedulerMonthCellStyle. These properties allow you to visually differentiate non-working days with custom background and text styles.

<scheduler:SfScheduler x:Name="scheduler"
                       View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView NonWorkingDays="Saturday,Sunday">
            <scheduler:SchedulerMonthView.CellStyle>
                <scheduler:SchedulerMonthCellStyle NonWorkingDaysBackground="Azure">
                    <scheduler:SchedulerMonthCellStyle.NonWorkingDaysTextStyle>
                        <scheduler:SchedulerTextStyle TextColor="Black" FontSize="12" />
                    </scheduler:SchedulerMonthCellStyle.NonWorkingDaysTextStyle>
                </scheduler:SchedulerMonthCellStyle>
            </scheduler:SchedulerMonthView.CellStyle>
        </scheduler:SchedulerMonthView>
    </scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.NonWorkingDays = SchedulerMonthWeekDays.Saturday | SchedulerMonthWeekDays.Sunday;

SchedulerTextStyle nonWorkTextStyle = new SchedulerTextStyle()
{
    TextColor = Colors.Black,
    FontSize = 12,
};

SchedulerMonthCellStyle monthCellStyle = new SchedulerMonthCellStyle()
{
    NonWorkingDaysBackground = Brush.Azure,
    NonWorkingDaysTextStyle = nonWorkTextStyle
};

scheduler.MonthView.CellStyle = monthCellStyle;
this.Content = scheduler;

Non-working-days-customization-in-month-view

Inline Appointments in Month View

Appointments can be displayed inline within the Month view using the ShowAppointmentsInline property. When ShowAppointmentsInline is false (default), appointments are not shown inline in the MonthView. When ShowAppointmentsInline is true, tapping a date cell displays all appointments for that date inline below the tapped row. This provides a quick way to view daily schedules without switching to another view. Inline appointments are rendered in a collection view, allowing customization of styles such as background, text color, and layout.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView ShowAppointmentsInline="True"/>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.ShowAppointmentsInline = true;
this.Content = scheduler;

Inline-appointments-in-month-view

Appointment time format in inline view

The TimeTextFormat property in MonthInlineViewStyle defines the string format used to display appointment time value in the inline view of the scheduler’s Month view. By default, appointment time is shown in the “hh:mm tt” format (12‑hour clock with AM/PM).

<schedule:SfScheduler x:Name="scheduler"
                      View="Month">
    <schedule:SfScheduler.MonthView>
        <schedule:SchedulerMonthView ShowAppointmentsInline="True">
            <schedule:SchedulerMonthView.MonthInlineViewStyle>
                <schedule:MonthInlineViewStyle TimeTextFormat="HH:mm"/>
            </schedule:SchedulerMonthView.MonthInlineViewStyle>
        </schedule:SchedulerMonthView>
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Week;
scheduler.MonthView.ShowAppointmentsInline = true;
scheduler.MonthView.MonthInlineViewStyle = new MonthInlineViewStyle()
{
    TimeTextFormat = "HH:mm"
};

Appointment-time-format-for-inline-appointments-in-month-view

Appointment height in inline view

The ItemHeight property in MonthInlineViewStyle specifies the vertical height of each appointment item displayed in the inline view of the scheduler’s Month view. By default, each appointment item has a height of 50 units. You can increase or decrease this value to adjust how compact or spacious the inline appointment list appears.

<schedule:SfScheduler x:Name="scheduler"
                      View="Month">
    <schedule:SfScheduler.MonthView>
        <schedule:SchedulerMonthView ShowAppointmentsInline="True">
            <schedule:SchedulerMonthView.MonthInlineViewStyle>
                <schedule:MonthInlineViewStyle ItemHeight="70"/>
            </schedule:SchedulerMonthView.MonthInlineViewStyle>
        </schedule:SchedulerMonthView>
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Week;
scheduler.MonthView.ShowAppointmentsInline = true;
scheduler.MonthView.MonthInlineViewStyle = new MonthInlineViewStyle()
{
    ItemHeight="70"
};

Item-height-customization-for-inline-appointments-in-month-view

Inline appointments appearance

Customize inline appointments appearance using TextStyle

The MonthInlineViewStyle property allows you to customize the appearance of inline view in the scheduler’s Month view using the Background and TextStyle properties.

<schedule:SfScheduler x:Name="scheduler"
                      View="Month">
    <schedule:SfScheduler.MonthView>
        <schedule:SchedulerMonthView ShowAppointmentsInline="True">
            <schedule:SchedulerMonthView.MonthInlineViewStyle>
                <schedule:MonthInlineViewStyle Background="Yellow">
                    <schedule:MonthInlineViewStyle.TextStyle>
                        <schedule:SchedulerTextStyle TextColor="White"
                                                     FontSize="14"/>
                    </schedule:MonthInlineViewStyle.TextStyle>
                </schedule:MonthInlineViewStyle>
            </schedule:SchedulerMonthView.MonthInlineViewStyle>
        </schedule:SchedulerMonthView>
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Week;
scheduler.MonthView.ShowAppointmentsInline = true;
scheduler.MonthView.MonthInlineViewStyle = new MonthInlineViewStyle()
{
    Background = Colors.Yellow,
    TextStyle = new SchedulerTextStyle()
    {
        TextColor = Colors.White,
        FontSize = 14,
    }

};

Inline-appointments-customization-in-month-view-using-text-style

Customize inline appointments appearance using DateTemplate

The MonthInlineViewItemTemplate property allows you to define a custom DataTemplate to customize the appearance of appointment items displayed in the inline view of the scheduler’s Month view.

<schedule:SfScheduler x:Name="scheduler"
                      View="Month">
    <schedule:SfScheduler.MonthView>
        <schedule:SchedulerMonthView ShowAppointmentsInline="True">
            <schedule:SchedulerMonthView.MonthInlineViewItemTemplate>
                <DataTemplate>
                    <Grid BackgroundColor="MediumOrchid" Padding="8">
                        <HorizontalStackLayout HorizontalOptions="Center"
                                               VerticalOptions="Center"
                                               Spacing="6">
                        <Label Text="&#xE71D;"
                               FontFamily="MauiMaterialAssets"
                               TextColor="White"
                               VerticalOptions="Center"/>
                        <Label Text="{Binding Subject}"
                               TextColor="White"
                               FontFamily="Bold"
                               VerticalOptions="Center"/>
                        </HorizontalStackLayout>
                    </Grid>
                </DataTemplate>
            </schedule:SchedulerMonthView.MonthInlineViewItemTemplate>
        </schedule:SchedulerMonthView>
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>

Inline-appointments-customization-in-month-view-using-date-template

MonthInlineAppointmentTapped

The MonthInlineAppointmentTapped event is raised when a user taps on an appointment displayed in the inline view of the scheduler’s Month view.

  • sender - Refers to the SfScheduler instance that raised the event.

This event provides details about the tapped appointment and the selected date through the MonthInlineAppointmentTappedEventArgs.

  • Appointment: Gets the tapped appointment. Returns null if the user taps an empty area.

  • SelectedDate: Gets the date of the month cell where the inline view was opened.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Month" 
                       MonthInlineAppointmentTapped="Scheduler_MonthInlineAppointmentTapped" >
</scheduler:SfScheduler>
this.Scheduler.MonthInlineAppointmentTapped += Scheduler_MonthInlineAppointmentTapped;

private void Scheduler_MonthInlineAppointmentTapped(object sender, MonthInlineAppointmentTappedEventArgs e)
{
    var appointment = e.Appointment;
    var date = e.SelectedDate;
}

View header

You can customize the default appearance of view header in a month view by setting the DayFormat, DayTextStyle, Background, Height, and ViewHeaderTemplate properties of MonthView in the SfScheduler.

Change day format of view header

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

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView>
            <scheduler:SchedulerMonthView.ViewHeaderSettings>
                <scheduler:SchedulerViewHeaderSettings DayFormat="dddd" />
            </scheduler:SchedulerMonthView.ViewHeaderSettings>
        </scheduler:SchedulerMonthView>
    </scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.ViewHeaderSettings.DayFormat = "dddd";
this.Content = scheduler;

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

View header height

The height of the ViewHeader can be customized by setting the Height property of ViewHeaderSettings in MonthView.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView>
            <scheduler:SchedulerMonthView.ViewHeaderSettings>
                <scheduler:SchedulerViewHeaderSettings Height="100" />
            </scheduler:SchedulerMonthView.ViewHeaderSettings>
        </scheduler:SchedulerMonthView>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.ViewHeaderSettings.Height = 100;
this.Content = scheduler;

customize-view-header-height-in-month-view-in-maui-scheduler

Customize view header appearance

The view header appearance customization can be achieved by using the TextStyle and ViewHeaderTemplate properties of MonthView in the SfScheduler.

Customize view header appearance using text style

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

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView>
            <scheduler:SchedulerMonthView.ViewHeaderSettings>
                <scheduler:SchedulerViewHeaderSettings DayFormat="dddd"
                                                       Background="LightSkyBlue"/>
            </scheduler:SchedulerMonthView.ViewHeaderSettings>
        </scheduler:SchedulerMonthView>
    </scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Month;
scheduler.MonthView.ViewHeaderSettings.Background = Brush.LightSkyBlue;
scheduler.MonthView.ViewHeaderSettings.DayFormat = "dddd";
this.Content = scheduler;

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

Customize view header appearance using DataTemplate

You can customize the view header appearance by using the ViewHeaderTemplate property of MonthView in the SfScheduler.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView>
            <scheduler:SchedulerMonthView.ViewHeaderTemplate>
                <DataTemplate>
                    <Grid Background = "MediumPurple" >
                        <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}" TextColor="White" FontSize="Subtitle" FontFamily="Bold" />
                    </Grid>
                </DataTemplate>
            </scheduler:SchedulerMonthView.ViewHeaderTemplate>
        </scheduler:SchedulerMonthView>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>

customize-view-header-appearance-using-template-in-month-view-in-maui-scheduler

Customize view header appearance using DataTemplateSelector

You can customize the view header appearance by using the ViewHeaderTemplate property of MonthView in the SfScheduler. The DataTemplateSelector can choose a DataTemplate at runtime based on the value of a data-bound to scheduler view header by using the ViewHeaderTemplate. It allows you to choose a different data template for each view header, as well as customize the appearance of a particular view header based on certain conditions.

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="normaldatesTemplate">
            <Grid Background = "lightBlue">
                <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}"  TextColor="Red" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="todayDatesTemplate">
            <Grid Background = "LightGreen" >
                <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}"  TextColor="Orange" />
            </Grid>
        </DataTemplate>
        <local:MonthViewHeaderTemplateSelector x:Key="monthViewHeaderTemplateSelector"  TodayDatesTemplate="{StaticResource todayDatesTemplate}"  NormaldatesTemplate="{StaticResource normaldatesTemplate}" />
    </Grid.Resources>
    <scheduler:SfScheduler x:Name="Scheduler" 
                           View="Month">
        <scheduler:SfScheduler.MonthView>
            <scheduler:SchedulerMonthView ViewHeaderTemplate = "{StaticResource monthViewHeaderTemplateSelector}"/>
        </scheduler:SfScheduler.MonthView>
    </scheduler:SfScheduler>
 </Grid>
public class MonthViewHeaderTemplateSelector : DataTemplateSelector
{
    public MonthViewHeaderTemplateSelector()
    {
    }
    public DataTemplate TodayDatesTemplate { get; set; }
    public DataTemplate NormaldatesTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var viewHeaderDetails = (DateTime)item;
        if (viewHeaderDetails.Date.Month == DateTime.Today.Month)
            return TodayDatesTemplate;
        return NormaldatesTemplate;
    }
}

NOTE

  • When using data template selector, performance issues occur as the conversion template views take time within the framework.

Month Navigation direction

The MonthView of SfScheduler can be navigated in both horizontal and vertical directions. You can change the direction of navigation through the NavigationDirection property of MonthViewSettings in SfScheduler . By default, the navigation direction is Horizontal.

<scheduler:SfScheduler x:Name="schedule" View="Month">
    <scheduler:SfScheduler.MonthView >
        <scheduler:SchedulerMonthView NavigationDirection="Vertical"/>
    </scheduler:SfScheduler.MonthView> 
</scheduler:SfScheduler>
schedule.MonthView.NavigationDirection = SchedulerMonthNavigationDirection.Vertical;

Vertical Swiping MonthView

Month cell appearance

The month cell appearance can be customized by using the CellStyle, and CellTemplate properties of MonthView in the SfScheduler.

Customize month cell appearance using text style

By using the CellStyle property of MonthView, 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.MonthView.CellStyle = monthCellStyle;

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

Customize month cell appearance using DataTemplate

You can customize the month cell appearance by using the CellTemplate property of MonthView in the SfScheduler.

<scheduler:SfScheduler x:Name="Scheduler" 
                        View="Month">
    <scheduler:SfScheduler.MonthView>
        <scheduler:SchedulerMonthView>
            <scheduler:SchedulerMonthView.CellTemplate>
                <DataTemplate>
                    <Grid Background = "MediumPurple">
                        <Label HorizontalTextAlignment="Center" TextColor="White" Text="{Binding DateTime.Day}"/>
                    </Grid>
                </DataTemplate>
            </scheduler:SchedulerMonthView.CellTemplate>
        </scheduler:SchedulerMonthView>
    </scheduler:SfScheduler.MonthView>
 </scheduler:SfScheduler>

customize-month-cell-appearance-using-template-in-month-view-in-maui-scheduler

NOTE

  • The BindingContext of the CellTemplate is the SchedulerMonthCellDetails.

Customize month cell appearance using DataTemplateSelector

You can customize the month cell appearance by using the CellTemplate property of MonthView in the SfScheduler. The DataTemplateSelector can choose a DataTemplate at runtime based on the value of a data-bound to scheduler month cells by using the CellTemplate. It allows you to choose a different data template for each month cell, as well as customize the appearance of a particular month cell based on certain conditions.

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="normalDateTemplate">
            <Grid Background = "MediumPurple">
                <Label HorizontalTextAlignment="Center" TextColor="White" Text="{Binding DateTime.Day}"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="todayDateTemplate">
            <Grid Background = "MediumPurple">
                <Label HorizontalTextAlignment="Center" TextColor="Yellow" Text="{Binding DateTime.Day}"/>
            </Grid>
        </DataTemplate>
        <local:MonthCellTemplateSelector x:Key="monthCellTemplateSelector" TodayDateTemplate="{StaticResource todayDateTemplate}" NormalDateTemplate="{StaticResource normalDateTemplate}"/>
    </Grid.Resources>
    <scheduler:SfScheduler x:Name="Scheduler" 
                           View="Month" >
        <scheduler:SfScheduler.MonthView>
            <scheduler:SchedulerMonthView CellTemplate="{StaticResource monthCellTemplateSelector}" />
        </scheduler:SfScheduler.MonthView>
    </scheduler:SfScheduler>
 </Grid>
public class MonthCellTemplateSelector : DataTemplateSelector
{
    public MonthCellTemplateSelector()
    {
    }
    public DataTemplate NormalDateTemplate { get; set; }
    public DataTemplate TodayDateTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var monthCellDetails = item as SchedulerMonthCellDetails;
        if (monthCellDetails.DateTime.Date == DateTime.Today.Date)
            return TodayDateTemplate;
        else
            return NormalDateTemplate;
    }
}
this.Scheduler.View = SchedulerView.Month;

NOTE

  • The BindingContext of the CellTemplate is the SchedulerMonthCellDetails.
  • When using data template selector, performance issues occur as the conversion template views take time within the framework.