MAUI

User Guide Demos Support Forums Download
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SchedulerMonthView

    Show / Hide Table of Contents

    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 : BindableObject

    Constructors

    SchedulerMonthView()

    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.

    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.

    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.

    • XAML
    • C#
     <schedule:SfScheduler x:Name="Scheduler"
                           View="Month" >
        <schedule:SfScheduler.MonthView>
             <schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" />
        </schedule:SfScheduler.MonthView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Month;
    this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
    See Also
    SchedulerMonthAppointmentDisplayMode

    AppointmentTemplate

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

    Declaration
    public DataTemplate AppointmentTemplate { get; set; }
    Property Value
    Type Description
    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 Description
    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
    Background
    TodayBackground
    LeadingMonthBackground
    TrailingMonthBackground
    TextStyle
    LeadingMonthTextStyle
    TrailingMonthTextStyle

    CellTemplate

    Gets or sets the month cell template or template selector.

    Declaration
    public DataTemplate CellTemplate { get; set; }
    Property Value
    Type Description
    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>

    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.

    • XAML
    • C#
     <schedule:SfScheduler x:Name="Scheduler"
                           View="Month" >
        <schedule:SfScheduler.MonthView>
             <schedule:SchedulerMonthView NumberOfVisibleWeeks=6/>
        </schedule:SfScheduler.MonthView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Month;
    this.Scheduler.MonthView.NumberOfVisibleWeeks = 6;

    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.

    • XAML
    • C#
     <schedule:SfScheduler x:Name="Scheduler"
                           View="Month" >
        <schedule:SfScheduler.MonthView>
             <schedule:SchedulerMonthView ShowLeadingAndTrailingDates = "False" />
        </schedule:SfScheduler.MonthView>
    </schedule:SfScheduler>
    this.Scheduler.View = SchedulerView.Month;
    this.Scheduler.MonthView.ShowLeadingAndTrailingDates = false;
    See Also
    LeadingMonthBackground
    LeadingMonthTextStyle
    TrailingMonthBackground
    TrailingMonthBackgroundProperty

    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 Description
    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>
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved