Events in .NET MAUI Scheduler (SfScheduler)

18 Nov 201820 minutes to read

The Scheduler supports the Tapped, DoubleTapped, LongPressed, SelectionChanged, and ViewChanged events to interact with .NET MAUI Scheduler.

Tapped

A Tapped event occurs each time a scheduler view is tapped. Below is a list of the arguments:

• Sender: This contains the SfScheduler object.

• Tapped: The tapped action performed on a Scheduler element can be found in the SchedulerTappedEventArgs, where you can see details about the tapped dates, appointments, and elements.

  • Appointments: Returns the selected appointments.
  • Date : Returns the selected date.
  • Element : Returns the Scheduler element tapped.
  • Resource : Returns the resource associated with the tapped element.
  • WeekNumber : Returns the tapped week number value.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler" 
                       Tapped="OnSchedulerTapped" >
</scheduler:SfScheduler>

MainPage.xaml.cs

this.Scheduler.Tapped += this.OnSchedulerTapped;

private void OnSchedulerTapped(object sender, SchedulerTappedEventArgs e)
{
    var appointments = e.Appointments;
    var selectedDate = e.Date;
    var schedulerElement = e.Element;
    var weekNumber = e.WeekNumber;
}

NOTE

• View scheduler appointment sample in GitHub
• View business object sample in GitHub

RightTapped

The RightTapped event occurs when a user performs a right-click action on scheduler elements in desktop platforms such as Windows or macOS.

• sender: The SfScheduler object where the right-click occurred

The SchedulerRightTappedEventArgs provides information about the right-click interaction:

• Appointments – Collection of appointments associated with the clicked element

• Date – The date corresponding to the clicked cell or appointment

• Element – The scheduler element interacted with (appointment, cell, header, resource, week number)

• Resource – The resource associated with the clicked element (in resource views)

• WeekNumber – The week number value (Not applicable in TimelineMonth and Agenda views)

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler" 
                       RightTapped="Scheduler_RightTapped" >
</scheduler:SfScheduler>

MainPage.xaml.cs

this.Scheduler.RightTapped += Scheduler_RightTapped;

private void Scheduler_RightTapped(object sender, SchedulerRightTappedEventArgs e)
{
    var element = e.Element;
    var date = e.Date;
    var resource = e.Resource;
    var appointments = e.Appointments;
    var weekNumber = e.WeekNumber;
}

DoubleTapped

Whenever the SfScheduler elements are double-tapped onto the view, the DoubleTapped event occurs. Below is a list of the arguments:

• Sender: This contains the SfScheduler object.

• DoubleTapped: This double-tapped action performed on a Scheduler element can be found in the SchedulerDoubleTappedEventArgs, where you can see the details about the double-tapped dates, appointments, and elements.

  • Appointments: Returns the double-tapped appointments.
  • Date : Returns the double-tapped date.
  • Element : Returns the double-tapped Scheduler element.
  • Resource : Returns the resource associated with the double-tapped element.
  • WeekNumber : Returns the double-tapped week number value.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler" 
                       DoubleTapped="OnSchedulerDoubleTapped" >
</scheduler:SfScheduler>

MainPage.xaml.cs

this.Scheduler.DoubleTapped += this.OnSchedulerDoubleTapped;

private void OnSchedulerDoubleTapped(object sender, SchedulerDoubleTappedEventArgs e)
{
    var appointments = e.Appointments;
    var selectedDate = e.Date;
    var schedulerElement = e.Element;
    var weekNumber = e.WeekNumber;
}

NOTE

• View scheduler appointment sample in GitHub
• View business object sample in GitHub

LongPressed

Whenever the SfScheduler elements are long-pressed onto the view, the LongPressed event occurs. Below is a list of the arguments:

• Sender: This contains the SfScheduler object.

• LongPressed: This long-pressed action performed on a Scheduler element can be found in the SchedulerLongPressedEventArgs, where you can see details about the long-pressed dates, appointments, and elements.

  • Appointments: Returns the long-pressed appointments.
  • Date : Returns the long-pressed date.
  • Element : Returns the long-pressed Scheduler element.
  • Resource : Returns the resource associated with the long-pressed element.
  • WeekNumber : Returns the long-pressed week number value.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler" 
                       LongPressed="OnSchedulerLongPressed" >
</scheduler:SfScheduler>

MainPage.xaml.cs

this.Scheduler.LongPressed += this.OnSchedulerLongPressed;

private void OnSchedulerLongPressed(object sender, SchedulerLongPressedEventArgs e)
{
    var appointments = e.Appointments;
    var selectedDate = e.Date;
    var schedulerElement = e.Element;
    var weekNumber = e.WeekNumber;
}

NOTE

• View scheduler appointment sample in GitHub
• View business object sample in GitHub

SelectionChanged

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

• Sender: This contains the SfScheduler object.

• SelectionChanged: The selection is changed when the selection-changed action is performed on the element available in the SchedulerSelectionChangedEventArgs.

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

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler" 
                       SelectionChanged="OnSchedulerSelectionChanged" >
</scheduler:SfScheduler>

MainPage.xaml.cs

this.Scheduler.SelectionChanged += this.OnSchedulerSelectionChanged;

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

NOTE

The Tapped event is triggered first, followed by the SelectionChanged event.

ViewChanged

The ViewChanged event is used to notify when the current view of the scheduler is changed, that is when the view is swiped to the previous or next view, and when the scheduler view is switched to another scheduler view.

• Sender: This contains the SfScheduler object.

• ViewChanged: The scheduler current view visible dates are available in the SchedulerViewChangedEventArgs when the scheduler visible dates or view is changed.

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

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler" 
                       ViewChanged="OnSchedulerViewChanged" >
</scheduler:SfScheduler>

MainPage.xaml.cs

this.Scheduler.ViewChanged += this.OnSchedulerViewChanged;

private void OnSchedulerViewChanged(object sender, SchedulerViewChangedEventArgs e)
{
    var oldVisibleDates = e.OldVisibleDates;
    var newVisibleDates = e.NewVisibleDates;
    var oldSchedulerView = e.OldView;
    var newSchedulerView = e.NewView;
}

NOTE

Whenever a scheduler view is changed, the SelectableDayPredicate function must be called to decide whether the cell is selectable in the SfScheduler.

Commands

Scheduler commands allow to map Tapped event, Double tapped event, Long Pressed event and View Changed event to Commands which supports the MVVM (Model-View-ViewModel) pattern.

TappedCommand

The TappedCommand will be triggered when you tap the scheduler view and passes the SchedulerTappedEventArgs as a parameter.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler"
                       View="Month"
                       AllowedViews="Day,Month,TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek,Agenda"
                       TappedCommand="{Binding SchedulerTappedCommand}">
                       <scheduler:SfScheduler.BindingContext>
                            <local:SchedulerInteractionViewModel />
                       </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>

MainPage.xaml.cs

public class SchedulerInteractionViewModel
{
    public ICommand SchedulerTappedCommand { get; set; }

    public SchedulerInteractionViewModel()
    {
        this.SchedulerTappedCommand = new Command<SchedulerTappedEventArgs>(ExecuteTapped);
    }

    private void ExecuteTapped(SchedulerTappedEventArgs obj)
    {
        var selectedDate = obj.Date;
    }

}

RightTappedCommand

The RightTappedCommand will be triggered when you perform a right tap on the scheduler view in desktop platforms (Windows and macOS) and will pass the SchedulerRightTappedEventArgs as the parameter.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler"
                       View="Month"
                       AllowedViews="Day,Week,WorkWeek,Month,TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek,Agenda"
                       RightTappedCommand="{Binding SchedulerRightTappedCommand}">
    <scheduler:SfScheduler.BindingContext>
        <local:SchedulerInteractionViewModel />
    </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>

MainPage.xaml.cs

public class SchedulerInteractionViewModel
{
    public ICommand SchedulerRightTappedCommand { get; set; }

    public SchedulerInteractionViewModel()
    {
        this.SchedulerRightTappedCommand = new Command<SchedulerRightTappedEventArgs>(ExecuteRightTapped, CanExecuteRightTapped);
    }

    private bool CanExecuteRightTapped(SchedulerRightTappedEventArgs arg)
    {
        return true;
    }

    private void ExecuteRightTapped(SchedulerRightTappedEventArgs obj)
    {
        var appointments = obj.Appointments;
        var date = obj.Date;
        var schedulerElement = obj.Element;
        var resource = obj.Resource;
        var weekNumber = obj.WeekNumber;
    }
}

DoubleTappedCommand

The DoubleTappedCommand will be triggered when you double-tap the scheduler view and passes the SchedulerDoubleTappedEventArgs as a parameter.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler"
                       View="Month"
                       AllowedViews="Day,Month,TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek,Agenda"
                       DoubleTappedCommand="{Binding SchedulerDoubleTappedCommand}">
                       
                       <scheduler:SfScheduler.BindingContext>
                            <local:SchedulerInteractionViewModel />
                       </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>

MainPage.xaml.cs

public class SchedulerInteractionViewModel
{
    public ICommand SchedulerDoubleTappedCommand { get; set; }

    public SchedulerInteractionViewModel()
    {
        this.SchedulerDoubleTappedCommand = new Command<SchedulerDoubleTappedEventArgs>(ExecuteDoubleTapped);
    }

    private void ExecuteDoubleTapped(SchedulerDoubleTappedEventArgs obj)
    {
        var selectedDate = obj.Date;
    }

}

LongPressedCommand

The LongPressedCommand will be triggered when you long-press the scheduler view and passes the SchedulerLongPressedEventArgs as a parameter.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler"
                       View="Month"
                       AllowedViews="Day,Month,TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek,Agenda"
                       LongPressedCommand="{Binding SchedulerLongPressedCommand}">

                       <scheduler:SfScheduler.BindingContext>
                            <local:SchedulerInteractionViewModel />
                       </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>

MainPage.xaml.cs

public class SchedulerInteractionViewModel
{
    public ICommand SchedulerLongPressedCommand { get; set; }   

    public SchedulerInteractionViewModel()
    {
        this.SchedulerLongPressedCommand = new Command<SchedulerLongPressedEventArgs>(ExecuteLongPressed);
    }

    private void ExecuteLongPressed(SchedulerLongPressedEventArgs obj)
    {
        var selectedDate = obj.Date;
    }
}

ViewChangedCommand

The ViewChangedCommand will be triggered when the scheduler view is changed and passes the SchedulerViewChangedEventArgs as a parameter.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler"
                       View="Month"
                       AllowedViews="Day,Month,TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek,Agenda"
                       ViewChangedCommand="{Binding SchedulerViewChangedCommand}">

                       <scheduler:SfScheduler.BindingContext>
                            <local:SchedulerInteractionViewModel />
                       </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>

MainPage.xaml.cs

public class SchedulerInteractionViewModel
{
    public ICommand SchedulerViewChangedCommand { get; set; }

    public SchedulerInteractionViewModel()
    {
        this.SchedulerViewChangedCommand = new Command<SchedulerViewChangedEventArgs>(ExecuteViewChanged);
    }

    private void ExecuteViewChanged(SchedulerViewChangedEventArgs obj)
    {
        var oldVisibleDates = obj.OldVisibleDates;
        var newVisibleDates = obj.NewVisibleDates;
        var oldSchedulerView = obj.OldView;
        var newSchedulerView = obj.NewView;
    }
}

SelectionChangedCommand

The SelectionChangedCommand will be triggered when the cell selection is changed in the scheduler and passes the SchedulerSelectionChangedEventArgs as a parameter.

MainPage.xaml

<scheduler:SfScheduler x:Name="Scheduler"
                       View="Month"
                       AllowedViews="Day,Month,TimelineDay,TimelineMonth,TimelineWeek,TimelineWorkWeek,Agenda"
                       SelectionChangedCommand="{Binding SchedulerSelectionChangedCommand}">
                       <scheduler:SfScheduler.BindingContext>
                            <local:SchedulerInteractionViewModel />
                       </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>

MainPage.xaml.cs

public class SchedulerInteractionViewModel
{
    public ICommand SchedulerSelectionChangedCommand { get; set; }

    public SchedulerInteractionViewModel()
    {
        this.SchedulerSelectionChangedCommand = new Command<SchedulerSelectionChangedEventArgs>(ExecuteSelectionChanged);
    }

    private void ExecuteSelectionChanged(SchedulerSelectionChangedEventArgs obj)
    {
        var newDateTime = obj.NewValue;
        var oldDateTime = obj.OldValue;
    }
}