Class SchedulerMonthView

Represents a class which is used to configure all the properties of Month view.

Inheritance
System.Object
SchedulerMonthView
Namespace: Syncfusion.Maui.Scheduler
Assembly: Syncfusion.Maui.Scheduler.dll
Syntax
public class SchedulerMonthView : Element, IThemeElement

Constructors

SchedulerMonthView()

Initializes a new instance of the SchedulerMonthView class.

Declaration
public SchedulerMonthView()

Fields

AppointmentDisplayModeProperty

Identifies the AppointmentDisplayMode dependency property.

Declaration
public static readonly BindableProperty AppointmentDisplayModeProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for AppointmentDisplayMode dependency property.

AppointmentIndicatorCountProperty

Identifies the AppointmentIndicatorCount dependency property.

Declaration
public static readonly BindableProperty AppointmentIndicatorCountProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for AppointmentIndicatorCount dependency property.

AppointmentTemplateProperty

Identifies the AppointmentTemplate dependency property.

Declaration
public static readonly BindableProperty AppointmentTemplateProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for AppointmentTemplate dependency property.

CellStyleProperty

Identifies the CellStyle dependency property.

Declaration
public static readonly BindableProperty CellStyleProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for CellStyle dependency property.

CellTemplateProperty

Identifies the CellTemplate dependency property.

Declaration
public static readonly BindableProperty CellTemplateProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for CellTemplate dependency property.

NavigationDirectionProperty

Identifies the NavigationDirection dependency property.

Declaration
public static readonly BindableProperty NavigationDirectionProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for NavigationDirection dependency property.

NumberOfVisibleWeeksProperty

Identifies the NumberOfVisibleWeeks dependency property.

Declaration
public static readonly BindableProperty NumberOfVisibleWeeksProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for NumberOfVisibleWeeks dependency property.

ShowLeadingAndTrailingDatesProperty

Identifies the ShowLeadingAndTrailingDates dependency property.

Declaration
public static readonly BindableProperty ShowLeadingAndTrailingDatesProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for ShowLeadingAndTrailingDates dependency property.

ViewHeaderSettingsProperty

Identifies the ViewHeaderSettings dependency property.

Declaration
public static readonly BindableProperty ViewHeaderSettingsProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for ViewHeaderSettings dependency property.

ViewHeaderTemplateProperty

Identifies the ViewHeaderTemplate dependency property.

Declaration
public static readonly BindableProperty ViewHeaderTemplateProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for ViewHeaderTemplate dependency property.

Properties

AppointmentDisplayMode

Gets or sets a value which defines the appointment display mode for the month cell in SfScheduler.

Declaration
public SchedulerMonthAppointmentDisplayMode AppointmentDisplayMode { get; set; }
Property Value
Type Description
SchedulerMonthAppointmentDisplayMode

The default value of AppointmentDisplayMode is Text.
Examples

The below examples shows, how to use the AppointmentDisplayMode property of SchedulerMonthView in the SfScheduler.

 <schedule:SfScheduler x:Name="Scheduler"
                       View="Month" >
    <schedule:SfScheduler.MonthView>
         <schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" />
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
See Also

AppointmentIndicatorCount

Gets or sets the number of appointment indicators displayed in month view When SchedulerMonthAppointmentDisplayMode is Indicator.

Declaration
public int AppointmentIndicatorCount { get; set; }
Property Value
Type Description
System.Int32

The default value of AppointmentIndicatorCount is 5.
Remarks

If the AppointmentIndicatorCount value fits within the cell width, the indicator will be shown based on the actual AppointmentIndicatorCount.If the count of appointments is less than the AppointmentIndicatorCount value, the indicator will be displayed according to the available appointments. If the value of AppointmentIndicatorCount exceeds the width of the month cell, the display will be adjusted to fit within the available space.

Examples

The below examples shows, how to use the AppointmentIndicatorCount property of SchedulerMonthView in the SfScheduler.

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

AppointmentTemplate

Gets or sets the appointment template to customize the default UI.

Declaration
public DataTemplate AppointmentTemplate { get; set; }
Property Value
Type
Microsoft.Maui.Controls.DataTemplate
Remarks

By default, the SchedulerAppointment is set as the BindingContext for AppointmentTemplate for both SchedulerAppointment and custom data object in AppointmentsSource. Custom data object can be bound in AppointmentTemplate by using DataItem. The AppointmentTemplate is applicable only when the AppointmentDisplayMode is set as Text in MonthView. The height of the appointment view will be calculated based on FontSize of the AppointmentTextStyle.

Examples

The following sample used to configure the custom appointments and appointment template.

# [Model.cs](#tab/tabid-8) 
public class Meeting
{
    public string EventName { get; set; }
    public DateTime From { get; set; }
    public DateTime To { get; set; }
    public Brush BackgroundBrush { get; set; }
    public string RecurrenceRule { get; set; }
}
# [C#](#tab/tabid-9) 
var customAppointments = new ObservableCollection<Meeting>();
var meeting = new Meeting()
{
   EventName = "General Meeting",
   From = new DateTime(2022, 2, 25, 09, 0, 0),
   To = new DateTime(2022, 2, 25, 10, 0, 0),
   BackgroundBrush = Brush.GreenYellow,
};
customAppointments.Add(meeting);
this.scheduler.AppointmentsSource = customAppointments;
# [XAML](#tab/tabid-10) 
<ContentPage.Resources>
    <DataTemplate x:Key="appointmentTemplate">
        <Grid Background="{Binding DataItem.BackgroundBrush}">
            <Label Text="{Binding DataItem.EventName}" TextColor="Black"/>
        </Grid>
    </DataTemplate>
</ContentPage.Resources>

<syncfusion:SfScheduler x:Name="scheduler">
<syncfusion:SfScheduler.MonthView>
<syncfusion:SchedulerMonthView AppointmentTemplate="{StaticResource appointmentTemplate}"/>
</syncfusion:SfScheduler.MonthView>
<syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:SchedulerAppointmentMapping
Subject="EventName"
StartTime="From"
EndTime="To"
Background="BackgroundBrush"/>
</syncfusion:SfScheduler.AppointmentMapping>
</syncfusion:SfScheduler>

CellStyle

Gets or sets the style of month cell, that used to customize the background, today background, leading month cell background, trailing month cell background and text color, font, font size, font family, font attributes of normal month cell, leading month cell and trailing month cell.

Declaration
public SchedulerMonthCellStyle CellStyle { get; set; }
Property Value
Type
SchedulerMonthCellStyle
Examples

The below examples shows, how to use the MonthCellStyle of SchedulerMonthView in the SfScheduler.

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;
See Also

CellTemplate

Gets or sets the month cell template or template selector.

Declaration
public DataTemplate CellTemplate { get; set; }
Property Value
Type
Microsoft.Maui.Controls.DataTemplate
Remarks

The BindingContext of the CellTemplate is the SchedulerMonthCellDetails. The QueryAppointments and QueryAppointmentsCommand are not applicable while AppointmentDisplayMode is None for Month view.

Examples

The following sample used to configure month cell using the Microsoft.Maui.Controls.DataTemplate.

# [XAML](#tab/tabid-7) 
<syncfusion:SfScheduler x:Name="Schedule">
   <syncfusion:SfScheduler.MonthView>
       <syncfusion:SchedulerMonthView>
           <syncfusion:SchedulerMonthView.CellTemplate>
               <DataTemplate>
                  <Border Background = "BlueViolet">
                    <Label HorizontalTextAlignment="Center"
                              TextColor="White" Text="{Binding DateTime.Day}"/>
                  </Border>
               </DataTemplate>
           </syncfusion:SchedulerMonthView.CellTemplate>
       </syncfusion:SchedulerMonthView>
  </syncfusion:SfScheduler.MonthView>
</syncfusion:SfScheduler>

NavigationDirection

Gets or sets a value which determines in which direction the month view scrolls.

Declaration
public SchedulerMonthNavigationDirection NavigationDirection { get; set; }
Property Value
Type Description
SchedulerMonthNavigationDirection

The default value of NavigationDirection is Horizontal.
Remarks

If this property set as MonthNavigationDirection.vertical the SfScheduler month view will navigate to the previous/next views in the vertical direction instead of the horizontal direction.

Examples

The below examples shows, how to use the NavigationDirection property of SchedulerMonthView in the SfScheduler.

 <schedule:SfScheduler x:Name="Scheduler"
                       View="Month" >
    <schedule:SfScheduler.MonthView>
         <schedule:SchedulerMonthView NavigationDirection="Vertical" />
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
See Also

NumberOfVisibleWeeks

Gets or sets the value to customize the number of rows count in the month view. It is applicable for the scheduler's month view.

Declaration
public int NumberOfVisibleWeeks { get; set; }
Property Value
Type Description
System.Int32

Defaults to 6 .
Remarks

ShowLeadingAndTrailingDates will be applicable when the number of visible weeks value is 6. The number of visible weeks value ranges from 1 to 6. If the value is greater than 6, it will be considered 6. If the value is less than 1, it will be considered 1.

Examples

The below examples shows, how to use the NumberOfVisibleWeeks property of SchedulerMonthView in the SfScheduler.

 <schedule:SfScheduler x:Name="Scheduler"
                       View="Month" >
    <schedule:SfScheduler.MonthView>
         <schedule:SchedulerMonthView NumberOfVisibleWeeks=6/>
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>

ShowLeadingAndTrailingDates

Gets or sets a value indicating whether to displays the leading and trailing dates in the month view of the SfScheduler.

Declaration
public bool ShowLeadingAndTrailingDates { get; set; }
Property Value
Type Description
System.Boolean

The default value of ShowLeadingAndTrailingDates is true.
Remarks

The leading and trailing dates are not visible, when the showTrailingAndLeadingDates value is false.

Examples

The below examples shows, how to use the ShowLeadingAndTrailingDates property of SchedulerMonthView in the SfScheduler.

 <schedule:SfScheduler x:Name="Scheduler"
                       View="Month" >
    <schedule:SfScheduler.MonthView>
         <schedule:SchedulerMonthView ShowLeadingAndTrailingDates = "False" />
    </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
See Also

ViewHeaderSettings

Gets or sets properties which allows to customize the view header setting of the Month in the SfScheduler.

Declaration
public SchedulerViewHeaderSettings ViewHeaderSettings { get; set; }
Property Value
Type Description
SchedulerViewHeaderSettings

The properties settings used to customize the view header setting.
Examples

The below examples shows, how to use the ViewHeaderSettings property of SchedulerMonthView in the SfScheduler.

var dayTextStyle = new SchedulerTextStyle()
{
   TextColor = Colors.DarkBlue,
   FontSize = 14,
};
this.Scheduler.View = SchedulerView.Month;
this.Scheduler.MonthView.ViewHeaderSettings.Background = Brush.LightSkyBlue;
this.Scheduler.MonthView.ViewHeaderSettings.DayFormat = "dd";
this.Scheduler.MonthView.ViewHeaderSettings.DayTextStyle = dayTextStyle;

ViewHeaderTemplate

Gets or sets the month view header template to customize the default UI.

Declaration
public DataTemplate ViewHeaderTemplate { get; set; }
Property Value
Type
Microsoft.Maui.Controls.DataTemplate
Remarks

The BindingContext of the ViewHeaderTemplate is the System.DateTime. The SelectableDayPredicate, MinimumDateTime, and MaximumDateTime of date and time values can be used directly in data template selector. />.

Examples

The following code used to configure the month view header using the Microsoft.Maui.Controls.DataTemplate.

# [XAML](#tab/tabid-11) 
<scheduler:SfScheduler x:Name="Scheduler"
                       View="Month">
    <scheduler:SfScheduler.MonthView>
       <scheduler:SchedulerMonthView>
           <scheduler:SchedulerMonthView.ViewHeaderTemplate>
               <DataTemplate>
                   <Grid Background = "lightBlue" >
                       <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}" TextColor="Red" />
                   </Grid>
               </DataTemplate>
           </scheduler:SchedulerMonthView.ViewHeaderTemplate>
       </scheduler:SchedulerMonthView>
   </scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>

The following code used to configure the month view header using the Microsoft.Maui.Controls.DataTemplateSelector.

# [DataTemplateSelector](#tab/tabid-12) 
public class ViewHeaderTemplateSelector : DataTemplateSelector
{
   public ViewHeaderTemplateSelector()
   {
   }
   public DataTemplate TodayDatesTemplate { get; set; }
   public DataTemplate NormaldatesTemplate { get; set; }
   protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
   {
      var viewHeaderDetails = (DateTime)item;
           if (viewHeaderDetails.DateTime.Month == DateTime.Today.Month)
               return TodayDatesTemplate;
       return NormaldatesTemplate;
   }
}
# [Resources](#tab/tabid-13) 
<ContentPage.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:ViewHeaderTemplateSelector x:Key="viewHeaderTemplateSelector"  TodayDatesTemplate="{StaticResource todayDatesTemplate}"  NormaldatesTemplate="{StaticResource normaldatesTemplate}" />
</ContentPage.Resources>
#[MainPage](#tab/tabid-14) 
<scheduler:SfScheduler x:Name="Scheduler"
                      View="Month">
   <scheduler:SfScheduler.MonthView>
       <scheduler:SchedulerMonthView ViewHeaderTemplate = "{StaticResource viewHeaderTemplateSelector}"/>
   </scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>