Commands

The Command design-pattern is very important and widely used in the XAML and MVVM world. RadCalendar control strictly follows these best practices and provides commands support.

CommandId Enumaration

Calendar control exposes the following commands included in the CommandId enumeration:

• CellTap: A command associated with the Tap event that occurs on tapping a calendar cell.

• AppointmentTap: Occurs when you tap over a specific appointment when in DayView/MultiDayView mode. It can be used to get all the information regarding the appointment. This command is associated with the AppointmentTapped event

• TimeSlotTap: Occurs when the end-user taps on a time slot. This command is associated with the Tap event.

AppointmentTap and TimeSlotTap commands are available for DayView and MultiDayView modes.

Command	Context
CellTap	Cell
AppointmentTap	AppointmentTapCommandContext
TimeSlotTap	TimeSlotTapCommandContext

Binding CalendarUserCommand

With this approach you could directly handle the needed commands in the ViewModel or page's code behind.

CellTap Command Example

Here is a sample RadCalendar definition:

<telerikInput:RadCalendar DisplayDate="2020,03,24">
    <telerikInput:RadCalendar.Commands>
        <commands:CalendarUserCommand Id="CellTap" Command="{Binding CellTapCommand}"/>
    </telerikInput:RadCalendar.Commands>
</telerikInput:RadCalendar>

Then add the following namespaces:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:commands="clr-namespace:Telerik.XamarinForms.Input.Calendar.Commands;assembly=Telerik.XamarinForms.Input"

How the command is defined in page's code behind:

public partial class CellTap : ContentView
{
    public CellTap()
    {
        InitializeComponent();

        this.CellTapCommand = new Command(this.OnCellTapped);
        this.BindingContext = this;
    }

    public ICommand CellTapCommand { get; set; }

    private void OnCellTapped(object obj)
    {
        var args = (CalendarDayCell)obj;
        Application.Current.MainPage.DisplayAlert("Cell Tap Command", "You have selected " + args.Date.ToString("dd/MMMM/yyyy"), "OK");
    }
}

Sample CellTap Command example can be found in the SDK Browser application/Examples/Calendar/Commands section.

TimeSlotTap Command Example

Sample Calendar definition:

<telerikInput:RadCalendar ViewMode="Day" 
                          DisplayDate="2020,03,24">
    <telerikInput:RadCalendar.Commands>
        <commands:CalendarUserCommand Id="TimeSlotTap" 
                                      Command="{Binding TimeSlotTapCommand}"/>
    </telerikInput:RadCalendar.Commands>
</telerikInput:RadCalendar>

Then add the following namespaces:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:commands="clr-namespace:Telerik.XamarinForms.Input.Calendar.Commands;assembly=Telerik.XamarinForms.Input"

How the TimeSlotTapCommand is defined in the pade's code behind:

public partial class TimeSlotTap : ContentView
{
    public TimeSlotTap()
    {
        InitializeComponent();

        this.TimeSlotTapCommand = new Command(this.OnTimeSlotTapped);
        this.BindingContext = this;
    }

    public ICommand TimeSlotTapCommand { get; set; }

    private void OnTimeSlotTapped(object obj)
    {
        var args = (TimeSlotTapCommandContext)obj;
        Application.Current.MainPage.DisplayAlert("TimeSlotTap Command", "Start Time is " + args.StartTime + " and Endtime is " + args.EndTime, "OK");
    }
}

The following namespace is needed when TimeSlotTap Command context is used:

using Telerik.XamarinForms.Input.Calendar.Commands;

Sample TimeSlotTap Command example can be found in the SDK Browser application/Examples/Calendar/Commands section.

Inheriting from CalendarCommands

this approach allows you to create a class that inherits from the CalendarCommand class.

Let's, for example, handle AppointmentTap action as a Command.

AppointmentTap Command Example

First, create a class that inherits from CalendarCommand and set its Id property accordingly. You would also need to override CanExecute and Execute methods as demonstrated in the example below:

public class AppointmentTapUserCommand : CalendarCommand
{
    public AppointmentTapUserCommand()
    {
        Id = CommandId.AppointmentTap;
    }

    public override bool CanExecute(object parameter)
    {
        return true;
    }

    public override void Execute(object parameter)
    {
        var tappedAppointment = ((AppointmentTapCommandContext)parameter).Appointment;
        Application.Current.MainPage.DisplayAlert("AppointmentTap Command", "Info: " + tappedAppointment.Title, "OK");
    }
}

Sample RadCalendar definition:

<telerikInput:RadCalendar x:Name="calendar"
                          ViewMode="MultiDay"
                          DisplayDate="2020,03,24"
                          AppointmentsSource="{Binding Appointments}">
    <telerikInput:RadCalendar.BindingContext>
        <local:ViewModel/>
    </telerikInput:RadCalendar.BindingContext>
</telerikInput:RadCalendar>

Add the following namespaces:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:commands="clr-namespace:Telerik.XamarinForms.Input.Calendar.Commands;assembly=Telerik.XamarinForms.Input"

Then add this Command to the Commands collection of the RadCalendar instance:

this.calendar.Commands.Add(new AppointmentTapUserCommand());

Create a sample ViewModel with appointments:

public class ViewModel
{
    public ViewModel()
    {
        var date = new DateTime(2020,03,24);
        this.Appointments = new ObservableCollection<Appointment>
        {
            new Appointment {
                Title = "Meeting with Tom",
                Detail = "Sea Garden",
                StartDate = date.AddHours(10),
                EndDate = date.AddHours(11),
                Color = Color.Tomato
            },
            new Appointment {
                Title = "Lunch with Sara",
                Detail = "Restaurant",
                StartDate = date.AddHours(12).AddMinutes(30),
                EndDate = date.AddHours(14),
                Color = Color.DarkTurquoise
            },
            new Appointment {
                Title = "Elle Birthday",
                StartDate = date.AddDays(1),
                EndDate = date.AddDays(1).AddHours(12),
                IsAllDay = true
            },
            new Appointment {
                Title = "Football Game",
                StartDate = date.AddDays(2).AddHours(15),
                EndDate = date.AddDays(2).AddHours(17),
                Color = Color.Green
            }
        };
    }

    public ObservableCollection<Appointment> Appointments { get; set; }
}

Sample AppointmentTap Command example can be found in the SDK Browser application/Examples/Calendar/Commands section.

See Also

• Events
• Date Properties
• View Modes
• Appointments