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.