Class SfCalendar

Initializes a new instance of the SfCalendar class that represents a control, used to display and select one or more dates with in specified date range.

Inheritance

System.Object

SfView

SfCalendar

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.Children

SfView.ClipToBounds

SfView.Padding

Namespace: Syncfusion.Maui.Toolkit.Calendar

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfCalendar : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, ICalendar, ICalendarYear, ICalendarMonth, IHeader, IInteractionInfo, IFooterView, ICalendarCommon, IHeaderCommon, IParentThemeElement, IThemeElement

Constructors

SfCalendar()

Initializes a new instance of the SfCalendar class.

Declaration

public SfCalendar()

Fields

AcceptCommandProperty

Identifies the AcceptCommand bindable property.

Declaration

public static readonly BindableProperty AcceptCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AcceptCommand bindable property.

AllowViewNavigationProperty

Identifies the AllowViewNavigation dependency property.

Declaration

public static readonly BindableProperty AllowViewNavigationProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AllowViewNavigation dependency property.

CanToggleDaySelectionProperty

Identifies the CanToggleDaySelection dependency property.

Declaration

public static readonly BindableProperty CanToggleDaySelectionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for CanToggleDaySelection dependency property.

CornerRadiusProperty

Identifies the CornerRadius bindable property.

Declaration

public static readonly BindableProperty CornerRadiusProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for CornerRadius bindable property.

DeclineCommandProperty

Identifies the DeclineCommand bindable property.

Declaration

public static readonly BindableProperty DeclineCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for DeclineCommand bindable property.

DisplayDateProperty

Identifies the DisplayDate dependency property.

Declaration

public static readonly BindableProperty DisplayDateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for DisplayDate dependency property.

DoubleTappedCommandProperty

Identifies the DoubleTappedCommand bindable property.

Declaration

public static readonly BindableProperty DoubleTappedCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for DoubleTappedCommand bindable property.

EnablePastDatesProperty

Identifies the EnablePastDates dependency property.

Declaration

public static readonly BindableProperty EnablePastDatesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for EnablePastDates dependency property.

EnableSwipeSelectionProperty

Identifies the EnableSwipeSelection dependency property.

Declaration

public static readonly BindableProperty EnableSwipeSelectionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for EnableSwipeSelection dependency property.

EndRangeSelectionBackgroundProperty

Identifies the EndRangeSelectionBackground dependency property.

Declaration

public static readonly BindableProperty EndRangeSelectionBackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for EndRangeSelectionBackground dependency property.

FooterViewProperty

Identifies the FooterView dependency property.

Declaration

public static readonly BindableProperty FooterViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FooterView dependency property.

HeaderTemplateProperty

Identifies the HeaderTemplate dependency property.

Declaration

public static readonly BindableProperty HeaderTemplateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for HeaderTemplate dependency property.

HeaderViewProperty

Identifies the HeaderView dependency property.

Declaration

public static readonly BindableProperty HeaderViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for HeaderView dependency property.

IdentifierProperty

Identifies the Identifier dependency property.

Declaration

public static readonly BindableProperty IdentifierProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Identifier dependency property.

IsOpenProperty

Identifies the IsOpen dependency property.

Declaration

public static readonly BindableProperty IsOpenProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for IsOpen dependency property.

LongPressedCommandProperty

Identifies the LongPressedCommand bindable property.

Declaration

public static readonly BindableProperty LongPressedCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LongPressedCommand bindable property.

MaximumDateProperty

Identifies the MaximumDate dependency property.

Declaration

public static readonly BindableProperty MaximumDateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for MaximumDate dependency property.

MinimumDateProperty

Identifies the MinimumDate dependency property.

Declaration

public static readonly BindableProperty MinimumDateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for MinimumDate dependency property.

ModeProperty

Identifies the Mode dependency property.

Declaration

public static readonly BindableProperty ModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Mode dependency property.

MonthViewHeaderTemplateProperty

Identifies the MonthViewHeaderTemplate dependency property.

Declaration

public static readonly BindableProperty MonthViewHeaderTemplateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for MonthViewHeaderTemplate dependency property.

MonthViewProperty

Identifies the MonthView dependency property.

Declaration

public static readonly BindableProperty MonthViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for MonthView dependency property.

NavigateToAdjacentMonthProperty

Identifies the NavigateToAdjacentMonth dependency property

Declaration

public static readonly BindableProperty NavigateToAdjacentMonthProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for NavigateToAdjacentMonth 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.

RangeSelectionDirectionProperty

Identifies the RangeSelectionDirection dependency property.

Declaration

public static readonly BindableProperty RangeSelectionDirectionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for RangeSelectionDirection dependency property.

RelativePositionProperty

Identifies the RelativePosition dependency property.

Declaration

public static readonly BindableProperty RelativePositionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for RelativePosition dependency property.

RelativeViewProperty

Identifies the RelativeView dependency property.

Declaration

public static readonly BindableProperty RelativeViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for RelativeView dependency property.

SelectableDayPredicateProperty

Identifies the SelectableDayPredicate dependency property.

Declaration

public static readonly BindableProperty SelectableDayPredicateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectableDayPredicate dependency property.

SelectedDateProperty

Identifies the SelectedDate dependency property.

Declaration

public static readonly BindableProperty SelectedDateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedDate dependency property.

SelectedDateRangeProperty

Identifies the SelectedDateRange dependency property.

Declaration

public static readonly BindableProperty SelectedDateRangeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedDateRange dependency property.

SelectedDateRangesProperty

Identifies the SelectedDateRanges dependency property.

Declaration

public static readonly BindableProperty SelectedDateRangesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedDateRanges dependency property.

SelectedDatesProperty

Identifies the SelectedDates dependency property.

Declaration

public static readonly BindableProperty SelectedDatesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedDates dependency property.

SelectionBackgroundProperty

Identifies the SelectionBackground dependency property.

Declaration

public static readonly BindableProperty SelectionBackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionBackground dependency property.

SelectionCellTemplateProperty

Identifies the SelectionCellTemplate dependency propert.

Declaration

public static readonly BindableProperty SelectionCellTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionChangedCommandProperty

Identifies the SelectionChangedCommand bindable property.

Declaration

public static readonly BindableProperty SelectionChangedCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionChangedCommand bindable property.

SelectionModeProperty

Identifies the SelectionMode dependency property.

Declaration

public static readonly BindableProperty SelectionModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionMode dependency property.

SelectionShapeProperty

Identifies the SelectionShape dependency property.

Declaration

public static readonly BindableProperty SelectionShapeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionShape dependency property.

ShowOutOfRangeDatesProperty

Identifies the ShowOutOfRangeDates dependency property.

Declaration

public static readonly BindableProperty ShowOutOfRangeDatesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ShowOutOfRangeDates dependency property.

ShowTrailingAndLeadingDatesProperty

Identifies the ShowTrailingAndLeadingDates dependency property.

Declaration

public static readonly BindableProperty ShowTrailingAndLeadingDatesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ShowTrailingAndLeadingDates dependency property.

StartRangeSelectionBackgroundProperty

Identifies the StartRangeSelectionBackground dependency property.

Declaration

public static readonly BindableProperty StartRangeSelectionBackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for StartRangeSelectionBackground dependency property.

TappedCommandProperty

Identifies the TappedCommand bindable property.

Declaration

public static readonly BindableProperty TappedCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TappedCommand bindable property.

TodayHighlightBrushProperty

Identifies the TodayHighlightBrush dependency property.

Declaration

public static readonly BindableProperty TodayHighlightBrushProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TodayHighlightBrush dependency property.

ViewChangedCommandProperty

Identifies the ViewChangedCommand bindable property.

Declaration

public static readonly BindableProperty ViewChangedCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ViewChangedCommand bindable property.

ViewProperty

Identifies the View dependency property.

Declaration

public static readonly BindableProperty ViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for View dependency property.

YearViewProperty

Identifies the YearView dependency property.

Declaration

public static readonly BindableProperty YearViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for YearView dependency property.

Properties

AcceptCommand

Gets or sets the action button clicked command in calendar view.

Declaration

public ICommand AcceptCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	The default value of AcceptCommand is null.

Examples

The following code demonstrates, how to use the AcceptCommand property in the calendar.

XAML
C#

 <ContentPage.BindingContext>
   <local:ViewModel/>
 </ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar" ShowActionButtons="True"
                     AcceptCommand="{Binding AcceptCommand}">
</Calendar:SfCalendar>

public class ViewModel : INotifyPropertyChanged
{
   private Command actionButtonClickedCommand;
   public ICommand AcceptCommand {
       get
       {
           return actionButtonClickedCommand;
       }
       set
       {
           if (actionButtonClickedCommand != value)
           {
               actionButtonClickedCommand = value;
               OnPropertyChanged(nameof(AcceptCommand));
           }
       }
   }
  public ViewModel()
   {
     AcceptCommand = new Command(ActionButtonClicked);
   }
  private void ActionButtonClicked()
    {
    }
 }

AllowViewNavigation

Gets or sets a value indicating whether the navigation enabled on year, decade and century cell interaction.

Declaration

public bool AllowViewNavigation { get; set; }

Property Value

Type	Description
System.Boolean	The default value of AllowViewNavigation is true.

Remarks

The selection will be enabled for year, decade and century views, while the property is disabled.

Examples

The following code demonstrates, how to use the AllowViewNavigation property in the calendar.

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     AllowViewNavigation="True">
</Calendar:SfCalendar>

Calendar.AllowViewNavigation = true;

CanToggleDaySelection

Gets or sets a value indicating whether the selected date is deselectable through interaction on single selection mode of SfCalendar.

Declaration

public bool CanToggleDaySelection { get; set; }

Property Value

Type	Description
System.Boolean	The default value of CanToggleDaySelection is false.

Remarks

This property is only applicable only for Single selection mode.

Examples

The following code demonstrates, how to use the CanToggleDaySelection property in the calendar

XAML

<Calendar:SfCalendar x:Name="Calendar"
                      CanToggleDaySelection="True">
</Calendar:SfCalendar>

#C#

Calendar.CanToggleDaySelection = true;

CornerRadius

Gets or sets the corner radius of the calendar view.

Declaration

public CornerRadius CornerRadius { get; set; }

Property Value

Type	Description
Microsoft.Maui.CornerRadius	The default value of CornerRadius is 20.

Examples

The following code demonstrates, how to use the CornerRadius property in the calendar.

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     CornerRadius="10">
</Calendar:SfCalendar>

Calendar.CornerRadius = 10;

DeclineCommand

Gets or sets the action button canceled command in calendar view.

Declaration

public ICommand DeclineCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	The default value of DeclineCommand is null.

Examples

The following code demonstrates, how to use the DeclineCommand property in the calendar.

XAML
C#

 <ContentPage.BindingContext>
   <local:ViewModel/>
 </ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar" ShowActionButtons="True"
                     DeclineCommand="{Binding DeclineCommand}">
</Calendar:SfCalendar>

public class ViewModel : INotifyPropertyChanged
{
   private Command actionButtonCanceledCommand;
   public ICommand DeclineCommand {
       get
       {
           return actionButtonCanceledCommand;
       }
       set
       {
           if (actionButtonCanceledCommand != value)
           {
               actionButtonCanceledCommand = value;
               OnPropertyChanged(nameof(DeclineCommand));
           }
       }
   }
  public ViewModel()
   {
     DeclineCommand = new Command(ActionButtonCanceled);
   }
  private void ActionButtonCanceled()
    {
    }
 }

DisplayDate

Gets or sets the display date to programmatically navigate the dates in the SfCalendar.

Declaration

public DateTime DisplayDate { get; set; }

Property Value

Type	Description
System.DateTime	The default value of DisplayDate is System.DateTime.Now.

Remarks

The date navigation before the MinimumDate will be reset to the calendar minimum date value and date navigation beyond the MaximumDate will be reset to the calendar maximum date value.

Examples

The following code demonstrates, how to use the DisplayDate property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     View="Month"
                     DisplayDate="2022/11/29">
</Calendar:SfCalendar>

Calendar.DisplayDate = new DateTime(2022, 11, 29);

DoubleTappedCommand

Gets or sets the double tapped command in calendar view.

Declaration

public ICommand DoubleTappedCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	The default value of DoubleTappedCommand is null.

Examples

The following code demonstrates, how to use the DoubleTappedCommand property in the calendar.

XAML
C#

 <ContentPage.BindingContext>
   <local:ViewModel/>
 </ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
                     DoubleTappedCommand="{Binding DoubleTappedCommand}">
</Calendar:SfCalendar>

public class ViewModel : INotifyPropertyChanged
{
   private Command doubleTappedCommand;
   public ICommand DoubleTappedCommand {
       get
       {
           return doubleTappedCommand;
       }
       set
       {
           if (doubleTappedCommand != value)
           {
               doubleTappedCommand = value;
               OnPropertyChanged(nameof(DoubleTappedCommand));
           }
       }
   }
  public ViewModel()
   {
     DoubleTappedCommand = new Command(DoubleTapped);
   }
  private void DoubleTapped()
    {
    }
 }

EnablePastDates

Gets or sets a value indicating whether the dates enabled or disabled before today date.

Declaration

public bool EnablePastDates { get; set; }

Property Value

Type	Description
System.Boolean	The default value of EnablePastDates is true.

Remarks

If the value is set to false, we cannot select the dates before the today date.

Examples

The following code demonstrates, how to use the EnablePastDates property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     EnablePastDates="False">
</Calendar:SfCalendar>

Calendar.EnablePastDates = false;

EnableSwipeSelection

Gets or sets a value indicating whether the swiping selection enabled for select the date range.

Declaration

public bool EnableSwipeSelection { get; set; }

Property Value

Type	Description
System.Boolean	The default value of EnableSwipeSelection is false.

Remarks

This property is only applicable, when the SelectionMode is Range.

Examples

The following code demonstrates, how to use the EnableSwipeSelection property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     EnableSwipeSelection="True">
</Calendar:SfCalendar>

Calendar.EnableSwipeSelection = true;

EndRangeSelectionBackground

Gets or sets the value that describes the highlight for range end date of calendar

Declaration

public Brush EndRangeSelectionBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value of EndRangeSelectionBackground is "#6200EE"(Blue).

Remarks

This property is only applicable only for Range selection mode.

Examples

The following code demonstrates, how to use the EndRangeSelectionBackground property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     EndRangeSelectionBackground="purple">
</Calendar:SfCalendar>

Calendar.EndRangeSelectionBackground = Colors.Purple;

FooterView

Gets or sets the properties which allows to customize the calendar footer.

Declaration

public CalendarFooterView FooterView { get; set; }

Property Value

Type
CalendarFooterView

Remarks

It will be applicable to all View.

Examples

The following code demonstrates, how to use the Footerview property in the calendar

SfCalendar Calendar = new SfCalendar();
Calendar.View = CalendarView.Month;
var calendarTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Black,
};
var calendarFooterView = new CalendarFooterView()
{
    ShowActionButtons = true,
    ShowTodayButton = true,
    TextStyle = calendarTextStyle,
    Height = 45,
    Background = Colors.LightBlue,
};
Calendar.FooterView = calendarFooterView;

HeaderTemplate

Gets or sets the header template or template selector for month, year, decade, and century view.

Declaration

public DataTemplate HeaderTemplate { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DataTemplate

Remarks

For default view customization, use the HeaderView.

Examples

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

# [XAML](#tab/tabid-1)

<calendar:SfCalendar x:Name="Calendar"
                       View="Month">
	<calendar:SfCalendar.HeaderTemplate>
		<DataTemplate>
			<Grid Background = "LightBlue">
				<Label x:Name="label" HorizontalOptions="Start" VerticalOptions="Center">
                <Label.Text>
					 <MultiBinding StringFormat = "{}{0:MMM dd, yyyy} - {1:MMM dd, yyyy}">
                      <Binding Path="StartDateRange" />
                      <Binding Path = "EndDateRange" />
                   </MultiBinding>
                </Label.Text>
                </Label>
				<Label  HorizontalOptions="Start" VerticalOptions="End" Text="{Binding Text}" TextColor="Red" />
            </Grid>
       </DataTemplate>
	</calendar:SfCalendar.HeaderTemplate>
</calendar:SfCalendar>

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

# [DataTemplateSelector](#tab/tabid-2)

public class HeaderTemplateSelector : DataTemplateSelector
{
   public HeaderTemplateSelector()
   {
   }
   public DataTemplate TodayDatesTemplate { get; set; }
   public DataTemplate NormaldatesTemplate { get; set; }
   protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
   {
       var headerDetails = item as CalendarHeaderDetails;
       if (headerDetails != null)
        {
           if (headerDetails.StartDateRange.Date <= DateTime.Now.Date && headerDetails.EndDateRange >= DateTime.Now.Date)
               return TodayDatesTemplate;
        }
       return NormaldatesTemplate;
    }
}

# [Resources](#tab/tabid-3)

<ContentPage.Resources>
   <DataTemplate x:Key="todayDatesTemplate">
   <Grid Background="LightBlue">
     <Label x:Name="label" HorizontalOptions="Start" VerticalOptions="Center">
      <Label.Text>
          <MultiBinding StringFormat = "{}{0:MMM dd, yyyy} - {1:MMM dd, yyyy}">
                <Binding Path="StartDateRange" />
                 <Binding Path="EndDateRange" />
           </MultiBinding>
       </Label.Text>
      </Label>
     <Label HorizontalOptions="Start" VerticalOptions="End" Text="{Binding Text}" TextColor="Red" />
    /Grid>
   </DataTemplate>
   <DataTemplate x:Key="normaldatesTemplate">
       <Grid Background="LightGreen">
           <Label x:Name="label" HorizontalOptions="Start" VerticalOptions="Center">
               <Label.Text>
                   <MultiBinding StringFormat = "{}{0:MMM dd, yyyy} - {1:MMM dd, yyyy}" >
                       <Binding Path="StartDateRange" />
                       <Binding Path = "EndDateRange" />
                   </MultiBinding >
               </Label.Text >
           </Label>
           <Label HorizontalOptions="Start" VerticalOptions="End" Text="{Binding Text}" TextColor="Orange" />
       </Grid>
   </DataTemplate>
  <local:HeaderTemplateSelector x:Key="headerTemplateSelector" TodayDatesTemplate="{StaticResource todayDatesTemplate}"  NormaldatesTemplate="{StaticResource normaldatesTemplate}" />
</ContentPage.Resources>

# [MainPage](#tab/tabid-4)

<calendar:SfCalendar x:Name="Calendar"
                       View="Month"
                       HeaderTemplate="{StaticResource headerTemplateSelector}">
</calendar:SfCalendar>

HeaderView

Gets or sets the properties which allows to customize the calendar header of month, year, decade and century views.

Declaration

public CalendarHeaderView HeaderView { get; set; }

Property Value

Type
CalendarHeaderView

Remarks

It will be applicable to all View.

Examples

The following code demonstrates, how to use the HeaderView property in the calendar

SfCalendar Calendar = new SfCalendar();
Calendar.View = CalendarView.Month;
var calendarTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Black,
};
var calendarHeaderView = new CalendarHeaderView()
{
    Height = 100,
    Background = Colors.Blue,
    TextFormat = "dd-mmm-yyyy",
    TextStyle = calendarTextStyle,
    ShowNavigationArrows = true,
};
Calendar.HeaderView = calendarHeaderView;

Identifier

Gets or sets the value determines the identifier of the calendar.

Declaration

public CalendarIdentifier Identifier { get; set; }

Property Value

Type	Description
CalendarIdentifier	The default value of Identifier is Gregorian.

Remarks

FlowDirection will be updated based on the Identifier and if you want to override this behavior, set FlowDirection after Identifier

Other than the gregorian calendar, the DateTime values can be given in two ways.

The DateTime instance without specifying calendar identifier, the calendar will handle the DateTime value for the specified calendar identifier.
The DateTime instance with specifying calendar identifier, then the calendar handles it directly.

Non supported identifiers are Lunar type identifier, Hebrew, and Japanese Identifiers.

Examples

The following code demonstrates, how to use the Identifier in the calendar.

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     Identifier="Hijri">
</Calendar:SfCalendar>

Calendar.Identifier = CalendarIdentifier.Hijri;

IsOpen

Gets or sets a value indicating whether the calendar popup is open or not.

Declaration

public bool IsOpen { get; set; }

Property Value

Type	Description
System.Boolean	The default value of IsOpen is "False".

Remarks

It will be applicable to set the Dialog or RelativeDialog.

Examples

The following code example demonstrates, how to set IsOpen property for the SfCalendar control.

# [C#](#tab/tabid-2)

using System.ComponentModel;
namespace CalendarMAUI
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
void clickToShowPopup_Clicked(object sender, EventArgs e)
{
Calendar.IsOpen = true;
}
}
}

XAML

<?xml version = "1.0" encoding="utf-8" ?>
<ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Toolkit.Calendar;assembly=Syncfusion.Maui.Toolkit"
    xmlns:local="clr-namespace:CalendarMAUI"
    x:Class="CalendarMAUI.MainPage">
<ContentPage.Content>
   <StackLayout WidthRequest = "500" >
       <syncfusion:SfCalendar x:Name="Calendar" Mode="Dialog"/>
       <Button x:Name="clickToShowCalendar" Text="Click To Show Calendar" Clicked="clickToShowPopup_Clicked"/>
   </StackLayout>
</ContentPage.Content>
</ContentPage>

LongPressedCommand

Gets or sets the long pressed command in calendar view.

Declaration

public ICommand LongPressedCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	The default value of LongPressedCommand is null.

Examples

The following code demonstrates, how to use the LongPressedCommand property in the calendar.

XAML
C#

 <ContentPage.BindingContext>
   <local:ViewModel/>
 </ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
                     LongPressedCommand="{Binding LongPressedCommand}">
</Calendar:SfCalendar>

public class ViewModel : INotifyPropertyChanged
{
   private Command longPressedCommand;
   public ICommand LongPressedCommand {
       get
       {
           return longPressedCommand;
       }
       set
       {
           if (longPressedCommand != value)
           {
               longPressedCommand = value;
               OnPropertyChanged(nameof(LongPressedCommand));
           }
       }
   }
  public ViewModel()
   {
     LongPressedCommand = new Command(LongPressed);
   }
  private void LongPressed()
    {
    }
 }

MaximumDate

Gets or sets the maximum display date to restrict the visible dates in the SfCalendar.

Declaration

public DateTime MaximumDate { get; set; }

Property Value

Type	Description
System.DateTime	The default value of MaximumDate is System.DateTime.MaxValue.

Remarks

The date after the maximum date will be disabled date. The navigation after the maximum date using DisplayDate is not possible. The forward navigation arrow will be disabled while the view reaches the maximum date.

Examples

The following code demonstrates, how to use the MaximumDate property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     MaximumDate="2022/12/25">
</Calendar:SfCalendar>

Calendar.MaximumDate = new DateTime(2022, 12, 25);

MinimumDate

Gets or sets the minimum display date to restrict the visible dates in the SfCalendar.

Declaration

public DateTime MinimumDate { get; set; }

Property Value

Type	Description
System.DateTime	The default value of MinimumDate is System.DateTime.MinValue.

Remarks

The date before the minimum date will be disabled date. The navigation before the minimum date using DisplayDate is not possible. The backward navigation arrow will be disabled while the view reaches the minimum date.

Examples

The following code demonstrates, how to use the MinimumDate property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     MinimumDate="2022/11/24">
</Calendar:SfCalendar>

Calendar.MinimumDate = new DateTime(2022, 11, 24);

Mode

Gets or sets the calendar mode.

Declaration

public CalendarMode Mode { get; set; }

Property Value

Type	Description
CalendarMode	The default value of Mode is Default.

Remarks

The Dialog and RelativeDialog only visible to set the IsOpen is "True".

Examples

The following code demonstrates, how to use the Mode property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     Mode="Dialog">
</Calendar:SfCalendar>

Calendar.IsOpen = True;

MonthView

Gets or sets the properties which allows to customize the calendar month view.

Declaration

public CalendarMonthView MonthView { get; set; }

Property Value

Type
CalendarMonthView

Examples

The following code demonstrates, how to use the Month view property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
View="Month">
<Calendar:SfCalendar.MonthView>
    <Calendar:CalendarMonthView NumberOfVisibleWeeks = "2"
                            FirstDayOfWeek="Wednesday"
                            ShowWeekNumber="True"
                            Background="Blue" />
    </Calendar:SfCalendar.MonthView>
</Calendar:SfCalendar>

Calendar.View = CalendarView.Month;
Calendar.MonthView = new CalendarMonthView()
{
	NumberOfVisibleWeeks = 2,
    FirstDayOfWeek = DayOfWeek.Wednesday,
    ShowWeekNumber = true,
    Background = Colors.Blue
};

MonthViewHeaderTemplate

Gets or sets the view header template or template selector for month view.

Declaration

public DataTemplate MonthViewHeaderTemplate { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DataTemplate

Remarks

For default view customization, use CalendarMonthHeaderView from MonthView.

Examples

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

# [XAML](#tab/tabid-11)

<calendar:SfCalendar x:Name="Calendar"
                       View="Month">
    <calendar:SfCalendar.MonthViewHeaderTemplate>
		<DataTemplate>
            <Grid Background="lightBlue">
                <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}" TextColor="Red" />
            </Grid>
        </DataTemplate>
   </calendar:SfCalendar.MonthViewHeaderTemplate>
</calendar:SfCalendar>

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

# [DataTemplateSelector](#tab/tabid-12)

public class MonthViewHeaderTemplateSelector : 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:MonthViewHeaderTemplateSelector x:Key="monthViewHeaderTemplateSelector"  TodayDatesTemplate="{StaticResource todayDatesTemplate}" NormaldatesTemplate="{StaticResource normaldatesTemplate}" />
</ContentPage.Resources>

# [MainPage](#tab/tabid-14)

<calendar:SfCalendar x:Name="Calendar"
                      View="Month"
                      MonthViewHeaderTemplate="{StaticResource monthViewHeaderTemplateSelector}">
</calendar:SfCalendar>

NavigateToAdjacentMonth

Gets or sets a value indicating whether the allow navigation by tapping adjacent month dates.

Declaration

public bool NavigateToAdjacentMonth { get; set; }

Property Value

Type	Description
System.Boolean	The default value of NavigateToAdjacentMonth is true.

Remarks

This property is only applicable, on the MonthView.

Examples

The following code demonstrates, how to use the NavigateToAdjacentMonth property in the calendar

XAML

<Calendar:SfCalendar x:Name="Calendar"
                     NavigateToAdjacentMonth="True">
</Calendar:SfCalendar>

NavigationDirection

Gets or sets a value which determines the direction of the calendar scrolls.

Declaration

public CalendarNavigationDirection NavigationDirection { get; set; }

Property Value

Type	Description
CalendarNavigationDirection	The default value of NavigationDirection is Vertical.

Examples

The following code demonstrates, how to use the NavigationDirection property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     NavigationDirection="Vertical">
</Calendar:SfCalendar>

Calendar.NavigationDirection = CalendarNavigationDirection.Vertical;

RangeSelectionDirection

Gets or sets a value determines the range selection direction of the SfCalendar.

Declaration

public CalendarRangeSelectionDirection RangeSelectionDirection { get; set; }

Property Value

Type	Description
CalendarRangeSelectionDirection	The default value of RangeSelectionDirection is Default.

Examples

The following code demonstrates, how to use the RangeSelectionDirection property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     RangeSelectionDirection="Default"">
</Calendar:SfCalendar>

Calendar.RangeSelectionDirection = CalendarRangeSelectionDirection.Default;

RelativePosition

Gets or sets the relative position of the calendar popup.

Declaration

public CalendarRelativePosition RelativePosition { get; set; }

Property Value

Type	Description
CalendarRelativePosition	The default value of RelativePosition is AlignTop.

Remarks

It will be applicable to set Mode is RelativeDialog.

Examples

The following code demonstrates, how to use the View property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     Mode="RelativeDialog" RelativePosition="AlignBottom">
</Calendar:SfCalendar>

Calendar.IsOpen = True;

RelativeView

Gets or sets the view relative to which the calendar dialog should be displayed based on the RelativePosition. RelativePosition

Declaration

public View RelativeView { get; set; }

Property Value

Type
Microsoft.Maui.Controls.View

Remarks

It is only applicable for RelativeDialog mode. If no relative view is given, the calendar will be set as the relative view.

Examples

The following code demonstrates, how to use the RelativeView property in the calendar

XAML
C#

<Grid WidthRequest="500">
    <calendar:SfCalendar x:Name="calendar"
                        Mode="RelativeDialog"
                        RelativePosition="AlignToRightOf"
                        RelativeView="{x:Reference calendarButton}">
    </calendar:SfCalendar>
    <Button Text="Open calendar"
            x:Name="calendarButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50"
            WidthRequest="150">
    </Button>
</Grid>

private void Button_Clicked(object sender, System.EventArgs e)
{
    this.calendar.IsOpen = true;
}

SelectableDayPredicate

Gets or sets the function to decide whether the cell is selectable or not in the calendar.

Declaration

public Func<DateTime, bool> SelectableDayPredicate { get; set; }

Property Value

Type
System.Func<System.DateTime, System.Boolean>

Remarks

It will be applicable to all View.

Examples

The following code demonstrates, how to use the SelectableDayPredicate function.

Calendar.SelectableDayPredicate = (date) =>
{
   if (date.DayOfWeek == DayOfWeek.Sunday || date.DayOfWeek == DayOfWeek.Saturday)
   {
       return false;
   }
   return true;
 };

SelectedDate

Gets or sets the selected date to select the particular date of the calendar.

Declaration

public Nullable<DateTime> SelectedDate { get; set; }

Property Value

Type	Description
System.Nullable<System.DateTime>	The default value of SelectedDate is null.

Remarks

This property is only applicable, when the SelectionMode is Single. In year, decade, and century views, can select the date only when the allow view navigation is false.

Examples

The following code demonstrates, how to use the SelectedDate property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     View="Month"
                     SelectedDate="2022/11/25">
</Calendar:SfCalendar>

Calendar.SelectedDate = new DateTime(2022, 11, 25);

SelectedDateRange

Gets or sets the selected date range to select the range of dates of the calendar.

Declaration

public CalendarDateRange SelectedDateRange { get; set; }

Property Value

Type	Description
CalendarDateRange	The default value of SelectedDateRange is null.

Remarks

This property is only applicable, when the SelectionMode is Range. In Year, Decade and Century, can select the range of dates only when the allow view navigation is false. SelectedDateRange value must be valid range The default value of selected date range is null. Valid range means End date is before of start date Invalid range means end date have value while start date is nullExample:(null, 2022/11/9)

Examples

The following code demonstrates, how to use the SelectedDateRange property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     View="Month">
</Calendar:SfCalendar>

Calendar.SelectedDateRange = new CalendarDateRange(new DateTime(2022, 11, 12), new DateTime(2022, 12, 15));

SelectedDateRanges

Gets or sets the selected multi date ranges to select the multiple range of dates of the calendar.

Declaration

public ObservableCollection<CalendarDateRange> SelectedDateRanges { get; set; }

Property Value

Type	Description
System.Collections.ObjectModel.ObservableCollection<CalendarDateRange>	The default value of SelectedDateRanges is null.

Remarks

This property is only applicable, when the SelectionMode is MultiRange. In Year, Decade and Century, can select the multi range of dates only when the allow view navigation is false. SelectedDateRanges value must be valid range The default value of selected date ranges is null. Valid range means End date is before of start date Invalid range means end date have value while start date is nullExample:(null, 2022/11/9)

Examples

The following code demonstrates, how to use the SelectedDateRanges property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     View="Month">
</Calendar:SfCalendar>

ObservableCollection<CalendarDateRange> dates = new ObservableCollection<CalendarDateRange>()
{
	new CalendarDateRange(new DateTime(2022, 10, 12), new DateTime(2022, 11, 15)),
	new CalendarDateRange(new DateTime(2022, 11, 20), new DateTime(2022, 12, 15)),
};
Calendar.SelectedDateRanges = dates;

SelectedDates

Gets or sets the selected dates to select the multiple dates of the calendar.

Declaration

public ObservableCollection<DateTime> SelectedDates { get; set; }

Property Value

Type
System.Collections.ObjectModel.ObservableCollection<System.DateTime>

Remarks

This property is only applicable, when the SelectionMode is Multiple. In year, decade and century views, can select the dates only when the allow view navigation is false. Selected dates remove the date when the existing selected date is interacted by touch. If the selected dates have identical dates and the date is interacted,then it will not remove all the identical dates. It will remove a single date from the selected dates collection, so the selection highlight will not be removed until all the identical dates are removed. Example: Consider that there is a collection like [01-01-2022, 01-01-2022]. When the interaction occurred on the same date in the UI, the collection was changed to [01-01-2022] from [01-01-2022, 01-01-2022]. So the collection still has the date after it is interacted. The date has to be interacted again to remove it from the collection.

Examples

The following code demonstrates, how to use the SelectedDates property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     View="Month">
</Calendar:SfCalendar>

ObservableCollection<DateTime> dates = new ObservableCollection<DateTime>()
{
    new DateTime(2022, 11, 20),
    new DateTime(2022, 11, 18),
    new DateTime(2022, 10, 25),
    new DateTime(2022, 12, 10),
};
Calendar.SelectedDates = dates;

SelectionBackground

Gets or sets the value that describes the highlight of selection based on selection mode of the calendar.

Highlight the selected date in single selection mode.
Highlight the selected dates in multiple selection mode.
Highlight the in between dates on range selection mode.

Declaration

public Brush SelectionBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value of SelectionBackground is null.

Remarks

Hovering background will change based on this value. If it is null then the selection background applied based on SelectionMode. In single and multiple selection, the selection background will show on "#6200EE"(Blue). In range selection, the in between range background will show on "#6200EE"(Blue) with Opacity value of 0.1.

Examples

The following code demonstrates, how to use the SelectionBackground property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     SelectionBackground="Blue">
</Calendar:SfCalendar>

Calendar.SelectionBackground = Colors.Blue;

SelectionCellTemplate

Gets or sets the Selection cell template

Declaration

public DataTemplate SelectionCellTemplate { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DataTemplate

Examples

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

# [XAML](#tab/tabid-11)

<calendar:SfCalendar View = "Month" WidthRequest="350" HeightRequest="400" 
					SelectionCellTemplate="{Binding Template}">
  <calendar:SfCalendar.BindingContext>
	 <local:SelectionCellTemplateView/>
  </calendar:SfCalendar.BindingContext>
</calendar:SfCalendar>

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

# [DataTemplateSelector](#tab/tabid-12)

internal class SelectionCellTemplateView
{
private DataTemplate template;
public DataTemplate Template
{
	get
	{
		return template;
	}
	set
	{
		template = value;
	}
}
public SelectionCellTemplateView()
{
	this.template = new DataTemplate(() =>
	{
		// Create a Grid with two columns
		Grid grid = new Grid
		{
			RowDefinitions =
{
	new RowDefinition { Height = GridLength.Star },
	new RowDefinition { Height = GridLength.Star }
},
			Padding = new Thickness(1),
			VerticalOptions = LayoutOptions.Center,
			HeightRequest = 40
		};
		// Create a Border with rounded corners
		Border border = new Border
		{
			BackgroundColor = Color.FromArgb("#4285F4"),
			Stroke = Colors.Transparent,
			StrokeShape = new RoundRectangle
			{
				CornerRadius = new CornerRadius(10)
			}
		};
		// Create Label and bind to Date.Year
		Label label = new Label
		{
			TextColor = Colors.White,
			HorizontalTextAlignment = TextAlignment.Center,
			VerticalTextAlignment = TextAlignment.Center,
			HorizontalOptions = LayoutOptions.Center,
			VerticalOptions = LayoutOptions.Center
		};
		label.SetBinding(Label.TextProperty, "Date.Day");
		// Create Image
		Image image = new Image
		{
			Source = "tick_image2.png",
			HeightRequest = 17,
			WidthRequest = 17,
			HorizontalOptions = LayoutOptions.Center,
			VerticalOptions = LayoutOptions.Center
		};
		// Add label and image to inner grid
		grid.Add(label, 0, 0);
		grid.Add(image, 0, 1);
		// Set content of border
		border.Content = grid;
		// Add border to outer grid
		//grid.Add(border);
		return border;
	});
}
}

SelectionChangedCommand

Gets or sets the selection changed command calendar view.

Declaration

public ICommand SelectionChangedCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	The default value of SelectionChangedCommand is null.

Examples

The following code demonstrates, how to use the SelectionChangedCommand property in the calendar.

XAML
C#

 <ContentPage.BindingContext>
   <local:ViewModel/>
 </ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
                     SelectionChangedCommand="{Binding SelectionCommand}">
</Calendar:SfCalendar>

public class ViewModel : INotifyPropertyChanged
{
   private Command selectionCommand;
   public ICommand SelectionCommand {
       get
       {
           return selectionCommand;
       }
       set
       {
           if (selectionCommand != value)
           {
               selectionCommand = value;
               OnPropertyChanged(nameof(SelectionCommand));
           }
       }
   }
  public ViewModel()
   {
     SelectionCommand = new Command(SelectionChanged);
   }
   private void SelectionChanged()
    {
    }
 }

SelectionMode

Gets or sets the selection mode of the calendar.

Declaration

public CalendarSelectionMode SelectionMode { get; set; }

Property Value

Type	Description
CalendarSelectionMode	The default value of SelectionMode is Microsoft.Maui.Controls.SelectionMode.Single

Remarks

In year, Decade and century view, the dates can be selected, only when the allow view navigation is false.

Examples

The following code demonstrates, how to use the SelectionMode property in the calendar.

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     SelectionMode="Single">
</Calendar:SfCalendar>

Calendar.SelectionMode = CalendarSelectionMode.Single;

SelectionShape

Gets or sets the selection shape of the SfCalendar.

Declaration

public CalendarSelectionShape SelectionShape { get; set; }

Property Value

Type	Description
CalendarSelectionShape	The default value of SelectionShape is circle.

Examples

The following code demonstrates, how to use the SelectionShape property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     SelectionShape="Circle">
</Calendar:SfCalendar>

Calendar.SelectionShape = CalendarSelectionShape.Circle;

ShowOutOfRangeDates

Gets or sets a value indicating whether to dates is out of minimum and maximum date range on the calendar.

Declaration

public bool ShowOutOfRangeDates { get; set; }

Property Value

Type	Description
System.Boolean	The default value of ShowOutOfRangeDates is true.

Examples

The following code demonstrates, how to use the ShowOutOfRangeDates property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     ShowOutOfRangeDates="False">
</Calendar:SfCalendar>

Calendar.ShowOutOfRangeDates = false;

ShowTrailingAndLeadingDates

Gets or sets a value indicating whether to displays the leading and trailing dates in the month, decade, century views of the SfCalendar.

Declaration

public bool ShowTrailingAndLeadingDates { get; set; }

Property Value

Type	Description
System.Boolean	The default value of ShowTrailingAndLeadingDates is true.

Remarks

This property is not applicable for Year view.

Examples

The following code demonstrates, how to use the ShowTrailingAndLeadingDates property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                      ShowTrailingAndLeadingDates="True">
</Calendar:SfCalendar>

Calendar.ShowTrailingAndLeadingDates = true;

StartRangeSelectionBackground

Gets or sets the value that describes the highlight for range start date of calendar.

Declaration

public Brush StartRangeSelectionBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value of StartRangeSelectionBackground is "#6200EE"(Blue).

Remarks

This property is only applicable only for Range selection mode.

Examples

The following code demonstrates, how to use the StartRangeSelectionBackground property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     StartRangeSelectionBackground="Purple">
</Calendar:SfCalendar>

Calendar.StartRangeSelectionBackground = Colors.Purple;

TappedCommand

Gets or sets the tapped command in calendar view.

Declaration

public ICommand TappedCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	The default value of TappedCommand is null.

Examples

The following code demonstrates, how to use the TappedCommand property in the calendar.

XAML
C#

 <ContentPage.BindingContext>
   <local:ViewModel/>
 </ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
                     ViewChanged="{Binding ViewChangedCommand}">
</Calendar:SfCalendar>

public class ViewModel : INotifyPropertyChanged
{
   private Command viewChangedCommand;
   public ICommand ViewChangedCommand {
       get
       {
           return viewChangedCommand;
       }
       set
       {
           if (viewChangedCommand != value)
           {
               viewChangedCommand = value;
               OnPropertyChanged(nameof(ViewChangedCommand));
           }
       }
   }
  public ViewModel()
   {
     ViewChangedCommand = new Command(ViewChanged);
   }
  private void ViewChanged()
    {
    }
 }

TodayHighlightBrush

Gets or sets the value that describes the today highlight color value.

Declaration

public Brush TodayHighlightBrush { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value of TodayHighlightBrush is "#6200EE"(Blue).

Remarks

This value is applied to month view header text, when the month view dates have a today date, and its value is not transparent.

Examples

The following code demonstrates, how to use the TodayHighlightBrush property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     Calendar.TodayHighlightBrush = Colors.Blue;">
</Calendar:SfCalendar>

Calendar.TodayHighlightBrush = Colors.Blue;

View

Gets or sets the built-in views such as month, year, decade and century of the SfCalendar.

Declaration

public CalendarView View { get; set; }

Property Value

Type	Description
CalendarView	The default value of View is Month.

Examples

The following code demonstrates, how to use the View property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     View="Month">
</Calendar:SfCalendar>

Calendar.View = CalendarView.Month;

ViewChangedCommand

Gets or sets the view changed command calendar view.

Declaration

public ICommand ViewChangedCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	The default value of ViewChangedCommand is null.

Examples

The following code demonstrates, how to use the ViewChangedCommand property in the calendar.

XAML
C#

 <ContentPage.BindingContext>
   <local:ViewModel/>
 </ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
                     ViewChanged="{Binding ViewChangedCommand}">
</Calendar:SfCalendar>

public class ViewModel : INotifyPropertyChanged
{
   private Command viewChangedCommand;
   public ICommand ViewChangedCommand {
       get
       {
           return viewChangedCommand;
       }
       set
       {
           if (viewChangedCommand != value)
           {
               viewChangedCommand = value;
               OnPropertyChanged(nameof(ViewChangedCommand));
           }
       }
   }
  public ViewModel()
   {
     ViewChangedCommand = new Command(ViewChanged);
   }
  private void ViewChanged()
    {
    }
 }

YearView

Gets or sets the properties which allows to customize the calendar year, decade and century views.

Declaration

public CalendarYearView YearView { get; set; }

Property Value

Type
CalendarYearView

Examples

The following code demonstrates, how to use the YearView property in the calendar

XAML
C#

<Calendar:SfCalendar x:Name="Calendar"
                     View="Year">
    <Calendar:SfCalendar.YearView>
        <Calendar:CalendarYearView MonthFormat = "MMM"
                               Background="Blue"
                               TodayBackground="Red">
        </Calendar:CalendarYearView>
    </Calendar:SfCalendar.YearView>
</Calendar:SfCalendar>

Calendar.View = CalendarView.Year;
Calendar.YearView = new CalendarYearView()
{
    MonthFormat = "MMM",
    Background = Colors.Blue,
    TodayBackground = Colors.Red
};

Methods

Backward()

Move to previous view which displays previous view dates.

Declaration

public void Backward()

Forward()

Move to next view which displays next view dates.

Declaration

public void Forward()

MeasureContent(Double, Double)

Measures the desired size of the view within the given constraints.

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint	The width limit for measuring the view.
System.Double	heightConstraint	The height limit for measuring the view.

Returns

Type	Description
Microsoft.Maui.Graphics.Size	The desired size of the view.

Overrides

Syncfusion.Maui.Toolkit.SfView.MeasureContent(System.Double, System.Double)

OnBindingContextChanged()

Triggers when property binding context changed.

Declaration

protected override void OnBindingContextChanged()

Overrides

Syncfusion.Maui.Toolkit.SfView.OnBindingContextChanged()

OnDraw(ICanvas, RectF)

Method to clip the content of the calendar view.

Declaration

protected override void OnDraw(ICanvas canvas, RectF dirtyRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas	The canvas.
Microsoft.Maui.Graphics.RectF	dirtyRect	The dirty rectangle.

Overrides

Syncfusion.Maui.Toolkit.SfView.OnDraw(Microsoft.Maui.Graphics.ICanvas, Microsoft.Maui.Graphics.RectF)

OnPropertyChanged(String)

Triggers when the calendar property changed.

Declaration

protected override void OnPropertyChanged(string propertyName = null)

Parameters

Type	Name	Description
System.String	propertyName	The property name.

OnSizeAllocated(Double, Double)

Method calls when the size for the view is allocated.

Declaration

protected override void OnSizeAllocated(double width, double height)

Parameters

Type	Name	Description
System.Double	width	The width of the view.
System.Double	height	The height of the view.

Events

ActionButtonCanceled

Occurs whenever the cancel button tapped on calendar. It reset the selected values to confirmed selected values.

Declaration

public event EventHandler ActionButtonCanceled

Event Type

Type
System.EventHandler

ActionButtonClicked

Occurs whenever the confirm button tapped on calendar. The date that have been selected are confirmed.

Declaration

public event EventHandler<CalendarSubmittedEventArgs> ActionButtonClicked

Event Type

Type
System.EventHandler<CalendarSubmittedEventArgs>

CalendarPopupClosed

Occurs when the calendar popup is closed.

Declaration

public event EventHandler CalendarPopupClosed

Event Type

Type
System.EventHandler

CalendarPopupClosing

Occurs when the calendar popup is closing.

Declaration

public event EventHandler<CancelEventArgs> CalendarPopupClosing

Event Type

Type
System.EventHandler<System.ComponentModel.CancelEventArgs>

CalendarPopupOpened

Occurs after the calendar popup is opened.

Declaration

public event EventHandler CalendarPopupOpened

Event Type

Type
System.EventHandler

CalendarPopupOpening

Occurs when the calendar popup is opening.

Declaration

public event EventHandler<CancelEventArgs> CalendarPopupOpening

Event Type

Type
System.EventHandler<System.ComponentModel.CancelEventArgs>

DoubleTapped

Occurs after the double tapped interaction on SfCalendar.

Declaration

public event EventHandler<CalendarDoubleTappedEventArgs> DoubleTapped

Event Type

Type
System.EventHandler<CalendarDoubleTappedEventArgs>

LongPressed

Occurs after the long press interaction on SfCalendar.

Declaration

public event EventHandler<CalendarLongPressedEventArgs> LongPressed

Event Type

Type
System.EventHandler<CalendarLongPressedEventArgs>

SelectionChanged

Occurs after the selection changed on SfCalendar.

Declaration

public event EventHandler<CalendarSelectionChangedEventArgs> SelectionChanged

Event Type

Type
System.EventHandler<CalendarSelectionChangedEventArgs>

Tapped

Occurs after the tap interaction on SfCalendar.

Declaration

public event EventHandler<CalendarTappedEventArgs> Tapped

Event Type

Type
System.EventHandler<CalendarTappedEventArgs>

ViewChanged

Occurs whenever the calendar view and visible dates changed on SfCalendar.

Declaration

public event EventHandler<CalendarViewChangedEventArgs> ViewChanged

Event Type

Type
System.EventHandler<CalendarViewChangedEventArgs>

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement