Events in .NET MAUI Calendar (SfCalendar)

23 Sep 202414 minutes to read

The Calendar has the events ViewChanged, SelectionChanged, Tapped, DoubleTapped, and LongPressed for notifying after user interactions in .NET MAUI Calendar.

ViewChanged

The ViewChanged event is used to notify when the current view of the calendar is changed while the view is swiped to the previous or next view, as well as when the calendar view is switched to another calendar view.

• Sender: This contains the SfCalendar object.

• EventArgs: In Calendar, CalendarViewChangedEventArgs is used for this event which holds the data of previous and new calendar views.

  • NewVisibleDates : Returns the new visible date range of the view.
  • OldVisibleDates : Returns the old visible date range of the view.
  • NewView : Returns the new calendar view.
  • OldView : Returns the old calendar view.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                      ViewChanged="OnCalendarViewChanged">
</calendar:SfCalendar>

MainPage.xaml.cs

this.calendar.ViewChanged += OnCalendarViewChanged;
private void OnCalendarViewChanged(object sender, CalendarViewChangedEventArgs e)
{
    var oldVisibleDates = e.OldVisibleDates;
    var newVisibleDates = e.NewVisibleDates;
    var oldCalendarView = e.OldView;
    var newCalendarView = e.NewView;
}

NOTE

Whenever a calendar view is changed, the SelectableDayPredicate function must be called to decide whether the cell is selectable or not in the SfCalendar.

SelectionChanged

The SelectionChanged event is used to notify when the cell selection is changed onto the view in the SfCalendar.

• Sender: This contains the SfCalendar object.

• EventArgs: In Calendar, CalendarSelectionChangedEventArgs is used for this event which holds the data of NewValue and OldValue.

  • NewValue : Returns the new selected date.
  • OldValue : Returns the old selected date.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                      SelectionChanged="OnCalendarSelectionChanged">
</calendar:SfCalendar>

MainPage.xaml.cs

this.calendar.SelectionChanged += this.OnCalendarSelectionChanged;

private void OnCalendarSelectionChanged(object sender,  private void OnCalendarSelectionChanged(object sender, CalendarSelectionChangedEventArgs e)
    {
        var oldDateTime = e.OldValue;
        var newDateTime = e.NewValue;
    }

NOTE

The Tapped event is triggered first, followed by ‘selection-changed’ event will be performed.

Tapped

A Tapped event is triggered, each time a calendar view is tapped. The following are the list of arguments:

• Sender: This contains the SfCalendar object.

• EventArgs: In Calendar, CalendarTappedEventArgs is used for this event which holds the data of date and element.

  • Date : Returns the selected date.
  • Element : Returns the Calendar element tapped.
  • WeekNumber : Returns the tapped WeekNumber.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                      Tapped="OnCalendarTapped">
</calendar:SfCalendar>

MainPage.xaml.cs

this.calendar.Tapped += OnCalendarTapped;
private void OnCalendarTapped(object sender, CalendarTappedEventArgs e)
{
    var selectedDate = e.Date;
    var calendarElement = e.Element;
    var weekNumber = e.WeekNumber;
}

DoubleTapped

Whenever the SfCalendar elements are double-tapped onto the view, the DoubleTapped event occurs. The following are the list of arguments:

• Sender: This contains the SfCalendar object.

• EventArgs: In Calendar, CalendarDoubleTappedEventArgs is used for this event which holds the data of date and element.

  • Date : Returns the double-tapped date.
  • Element : Returns the double-tapped Calendar element.
  • WeekNumber : Returns the double-tapped WeekNumber.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                      DoubleTapped="OnCalendarDoubleTapped">
</calendar:SfCalendar>

MainPage.xaml.cs

this.calendar.DoubleTapped += this.OnCalendarDoubleTapped;

private void OnCalendarDoubleTapped(object sender, CalendarDoubleTappedEventArgs e)
{
    var selectedDate = e.Date;
    var calendarElement = e.Element;
    var weekNumber = e.WeekNumber;
}

LongPressed

Whenever the SfCalendar elements are long-pressed onto the view, the LongPressed event is triggered. The following are the list of arguments:

• Sender: This contains the SfCalendar object.

• EventArgs: In Calendar, CalendarLongPressedEventArgs is used for this event which holds the data of date and element.

  • Date : Returns the long-pressed date.
  • Element : Returns the long-pressed Calendar element.
  • WeekNumber : Returns the long-pressed WeekNumber.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                      LongPressed="OnCalendarLongPressed">
</calendar:SfCalendar>

MainPage.xaml.cs

this.calendar.LongPressed += this.OnCalendarLongPressed;

private void OnCalendarLongPressed(object sender, CalendarLongPressedEventArgs e)
{
    var selectedDate = e.Date;
    var calendarElement = e.Element;
    var weekNumber = e.WeekNumber;
}

Commands

ViewChangedCommand

The SfCalendar includes a built-in event called ViewChanged, which is triggered whenever the calendar view is navigated to either the previous or next view. This event can be invoked through the ViewChangedCommand, and it also triggers when switching between different calendar views. The CalendarViewChangedEventArgs is provided as a parameter to this event.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                      ViewChangedCommand="ViewChangedCommand">
<ContentPage.BindingContext>
    <local:CalendarViewModel/>
</ContentPage.BindingContext>					  
</calendar:SfCalendar>

MainPage.xaml.cs

public class CalendarViewModel
{
    public ICommand ViewChangedCommand { get; set; }
    public CalendarViewModel()
    {
        ViewChangedCommand = new Command<CalendarViewChangedEventArgs>(ViewChanged);
    }
    private void ViewChanged(CalendarViewChangedEventArgs args)
    {
        // To do your requirement here.
    }
}

SelectionChangedCommand

The SfCalendar includes a built-in event called SelectionChanged that is triggered whenever the selection in the calendar changes. This event can be invoked through the SelectionChangedCommand, which passes the CalendarSelectionChangedEventArgs as a parameter.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                     SelectionChangedCommand="SelectionChangedCommand">
<ContentPage.BindingContext>
    <local:CalendarViewModel/>
</ContentPage.BindingContext>					  
</calendar:SfCalendar>

MainPage.xaml.cs

public class CalendarViewModel
{
    public ICommand SelectionChangedCommand { get; set; }
    public CalendarViewModel()
    {
        SelectionChangedCommand = new Command<CalendarSelectionChangedEventArgs>(SelectionChanged);
    }
    private void SelectionChanged(CalendarSelectionChangedEventArgs args)
    {
        // To do your requirement here.
    }
}

TappedCommand

The SfCalendar includes a built-in event called Tapped that is triggered whenever the calendar view is tapped. This event can be invoked through the TappedCommand which passes the CalendarTappedEventArgs as a parameter.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                     TappedCommand="TappedCommand">
<ContentPage.BindingContext>
    <local:CalendarViewModel/>
</ContentPage.BindingContext>					  
</calendar:SfCalendar>

MainPage.xaml.cs

public class CalendarViewModel
{
    public ICommand TappedCommand { get; set; }
    public CalendarViewModel()
    {
        TappedCommand = new Command<CalendarTappedEventArgs>(Tapped);
    }
    private void Tapped(CalendarTappedEventArgs args)
    {
        // To do your requirement here.
    }
}

DoubleTappedCommand

The SfCalendar includes a built-in event called DoubleTapped that is triggered whenever the calendar view is double-tapped. This event can be invoked through the DoubleTappedCommand, which passes the CalendarDoubleTappedEventArgs as a parameter.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                     DoubleTappedCommand="DoubleTappedCommand">
<ContentPage.BindingContext>
    <local:CalendarViewModel/>
</ContentPage.BindingContext>					  
</calendar:SfCalendar>

MainPage.xaml.cs

public class CalendarViewModel
{
    public ICommand DoubleTappedCommand { get; set; }
    public CalendarViewModel()
    {
        DoubleTappedCommand = new Command<CalendarDoubleTappedEventArgs>(DoubleTapped);
    }
    private void DoubleTapped(CalendarDoubleTappedEventArgs args)
    {
        // To do your requirement here.
    }
}

LongPressedCommand

The SfCalendar includes a built-in event called LongPressed, which is triggered when the calendar view is long pressed. This event can be invoked through the LongPressedCommand, with the CalendarLongPressedEventArgs passed as a parameter.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                     LongPressedCommand="LongPressedCommand">
<ContentPage.BindingContext>
    <local:CalendarViewModel/>
</ContentPage.BindingContext>					  
</calendar:SfCalendar>

MainPage.xaml.cs

public class CalendarViewModel
{
    public ICommand LongPressedCommand { get; set; }
    public CalendarViewModel()
    {
        LongPressedCommand = new Command<CalendarLongPressedEventArgs>(LongPressed);
    }
    private void LongPressed(CalendarLongPressedEventArgs args)
    {
        // To do your requirement here.
    }
}

AcceptCommand

The SfCalendar includes a built-in event called ActionButtonClicked, which is triggered when the confirm button is tapped on the calendar. This event can be invoked through the AcceptCommand.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                     AcceptCommand="AcceptCommand">
<ContentPage.BindingContext>
    <local:CalendarViewModel/>
</ContentPage.BindingContext>					  
</calendar:SfCalendar>

MainPage.xaml.cs

public class CalendarViewModel
{
    public ICommand AcceptCommand { get; set; }
    public CalendarViewModel()
    {
        AcceptCommand = new Command(ActionButtonClicked);
    }
    private void ActionButtonClicked()
    {
        // To do your requirement here.
    }
}

DeclineCommand

The SfCalendar includes a built-in event called ActionButtonCanceled, which is triggered when the cancel button is tapped on the calendar. This event can be invoked through the DeclineCommand.

MainPage.xaml

<calendar:SfCalendar  x:Name="calendar" 
                     DeclineCommand="DeclineCommand">
<ContentPage.BindingContext>
    <local:CalendarViewModel/>
</ContentPage.BindingContext>					  
</calendar:SfCalendar>

MainPage.xaml.cs

public class CalendarViewModel
{
    public ICommand DeclineCommand { get; set; }
    public CalendarViewModel()
    {
        DeclineCommand = new Command(ActionButtonCanceled);
    }
    private void ActionButtonCanceled()
    {
        // To do your requirement here.
    }
}