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.
Implements
Inherited Members
Namespace: Syncfusion.Maui.Calendar
Assembly: Syncfusion.Maui.Calendar.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. |
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. |
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. |
ShowActionButtonsProperty
Identifies the ShowActionButtons dependency property.
Declaration
public static readonly BindableProperty ShowActionButtonsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShowActionButtons 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. |
ShowTodayButtonProperty
Identifies the ShowTodayButton dependency property.
Declaration
public static readonly BindableProperty ShowTodayButtonProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShowTodayButton 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
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar" ShowActionButtons="True"
AcceptCommand="{Binding AcceptCommand}">
</Calendar:SfCalendar>
#XAML
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
<Calendar:SfCalendar x:Name="Calendar"
AllowViewNavigation="True">
</Calendar:SfCalendar>
#C#
this.Calendar.AllowViewNavigation = true;
See Also
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#
this.Calendar.CanToggleDaySelection = true;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
CornerRadius="10">
</Calendar:SfCalendar>
#XAML
this.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
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar" ShowActionButtons="True"
DeclineCommand="{Binding DeclineCommand}">
</Calendar:SfCalendar>
#XAML
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
<Calendar:SfCalendar x:Name="Calendar"
View="Month"
DisplayDate="2022/11/29">
</Calendar:SfCalendar>
this.Calendar.DisplayDate = new DateTime(2022, 11, 29);
See Also
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
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
DoubleTappedCommand="{Binding DoubleTappedCommand}">
</Calendar:SfCalendar>
#XAML
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
<Calendar:SfCalendar x:Name="Calendar"
EnablePastDates="False">
</Calendar:SfCalendar>
this.Calendar.EnablePastDates = false;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
EnableSwipeSelection="True">
</Calendar:SfCalendar>
this.Calendar.EnableSwipeSelection = true;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
EndRangeSelectionBackground="purple">
</Calendar:SfCalendar>
#C#
this.Calendar.EndRangeSelectionBackground = Colors.Purple;
See Also
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
this.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,
};
this.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.
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
this.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,
};
this.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
<Calendar:SfCalendar x:Name="Calendar"
Identifier="Hijri">
</Calendar:SfCalendar>
this.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 |
---|
System.Boolean |
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
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
LongPressedCommand="{Binding LongPressedCommand}">
</Calendar:SfCalendar>
#XAML
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
<Calendar:SfCalendar x:Name="Calendar"
MaximumDate="2022/12/25">
</Calendar:SfCalendar>
this.Calendar.MaximumDate = new DateTime(2022, 12, 25);
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
MinimumDate="2022/11/24">
</Calendar:SfCalendar>
this.Calendar.MinimumDate = new DateTime(2022, 11, 24);
See Also
Mode
Gets or sets the calendar mode.
Declaration
public CalendarMode Mode { get; set; }
Property Value
Type |
---|
CalendarMode |
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
<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>
this.Calendar.View = CalendarView.Month;
this.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.
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
<Calendar:SfCalendar x:Name="Calendar"
NavigationDirection="Vertical">
</Calendar:SfCalendar>
this.Calendar.NavigationDirection = CalendarNavigationDirection.Vertical;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
RangeSelectionDirection="Default"">
</Calendar:SfCalendar>
#XAML
this.Calendar.RangeSelectionDirection = CalendarRangeSelectionDirection.Default;
See Also
RelativePosition
Gets or sets the relative position of the calendar popup.
Declaration
public CalendarRelativePosition RelativePosition { get; set; }
Property Value
Type |
---|
CalendarRelativePosition |
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.
this.Calendar.SelectableDayPredicate = (date) =>
{
if (date.DayOfWeek == DayOfWeek.Sunday || date.DayOfWeek == DayOfWeek.Saturday)
{
return false;
}
return true;
};
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
View="Month"
SelectedDate="2022/11/25">
</Calendar:SfCalendar>
this.Calendar.SelectedDate = new DateTime(2022, 11, 25);
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
View="Month">
</Calendar:SfCalendar>
this.Calendar.SelectedDateRange = new CalendarDateRange(new DateTime(2022, 11, 12), new DateTime(2022, 12, 15));
See Also
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 |
---|
System.Collections.ObjectModel.ObservableCollection<CalendarDateRange> |
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
<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),
};
this.Calendar.SelectedDates = dates;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
SelectionBackground="Blue">
</Calendar:SfCalendar>
#C#
this.Calendar.SelectionBackground = Colors.Blue;
See Also
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
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
SelectionChangedCommand="{Binding SelectionCommand}">
</Calendar:SfCalendar>
#XAML
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
<Calendar:SfCalendar x:Name="Calendar"
SelectionMode="Single">
</Calendar:SfCalendar>
#C#
this.Calendar.SelectionMode = CalendarSelectionMode.Single;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
SelectionShape="Circle">
</Calendar:SfCalendar>
this.Calendar.SelectionShape = CalendarSelectionShape.Circle;
ShowActionButtons
Gets or sets a value indicating whether to displays the confirm and cancel buttons on the calendar to perform the confirm and cancel actions.
Declaration
public bool ShowActionButtons { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value of ShowActionButtons is false. |
Examples
The following code demonstrates, how to use the ShowActionButtons property in the calendar #XAML
<Calendar:SfCalendar x:Name="Calendar"
ShowActionButtons="True">
</Calendar:SfCalendar>
#XAML
this.Calendar.ShowActionButtons = true;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
ShowOutOfRangeDates="False">
</Calendar:SfCalendar>
#XAML
this.Calendar.ShowOutOfRangeDates = false;
See Also
ShowTodayButton
Gets or sets a value indicating whether to displays the today buttons on the calendar to navigate to current date.
Declaration
public bool ShowTodayButton { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value of ShowTodayButton is false. |
Examples
The following code demonstrates, how to use the ShowTodayButton property in the calendar #XAML
<Calendar:SfCalendar x:Name="Calendar"
ShowTodayButton="True">
</Calendar:SfCalendar>
#XAML
this.Calendar.ShowTodayButton = true;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
ShowTrailingAndLeadingDates="True">
</Calendar:SfCalendar>
#C#
this.Calendar.ShowTrailingAndLeadingDates = true;
See Also
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
<Calendar:SfCalendar x:Name="Calendar"
StartRangeSelectionBackground="Purple">
</Calendar:SfCalendar>
#C#
this.Calendar.StartRangeSelectionBackground = Colors.Purple;
See Also
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
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
ViewChanged="{Binding ViewChangedCommand}">
</Calendar:SfCalendar>
#XAML
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
<Calendar:SfCalendar x:Name="Calendar"
this.Calendar.TodayHighlightBrush = Colors.Blue;">
</Calendar:SfCalendar>
#C#
this.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 |
Examples
The following code demonstrates, how to use the View property in the calendar #XAML
<Calendar:SfCalendar x:Name="Calendar"
View="Month">
</Calendar:SfCalendar>
this.Calendar.View = CalendarView.Month;
See Also
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
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Calendar:SfCalendar x:Name="Calendar"
ViewChanged="{Binding ViewChangedCommand}">
</Calendar:SfCalendar>
#XAML
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
<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>
this.Calendar.View = CalendarView.Year;
this.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
OnBindingContextChanged()
Triggers when property binding context changed.
Declaration
protected override void OnBindingContextChanged()
Overrides
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
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> |