Appointments

Creating an Appointment

RadCalendar can display appointments by setting its AppointmentsSource property. AppointmentsSource accepts a collection of Telerik.XamarinForms.Input.Appointment objects. Each Appointment defines the following members:

  • StartDate (DateTime);
  • EndDate (DateTime);
  • Title (string): sets the subject of the appointment;
  • Detail (string): adds additional information related to the appointment;
  • Color (Color): : specifies the color marking the appointment when visualized in the timeline;
  • IsAllDay (bool): indicates whether the appointment will take all day;
  • RecurrenceRule (IRecurrenceRule): defines basic properties of the recurrence rule of the appointment, for more details go to Recurrence topic.

The other alternative is to create custom appointment class that implements the Telerik.XamarinForms.Input.IAppointment interface. The interface, however, misses the RecurrenceRule property, so we'd recommend you use directly the Appointment class when working with appointments.

Here is a quick example on how you can create Appointments collection and bind it to the AppointmentsSource property of RadCalendar.

First, create a ViewModel class and add "Appointments" collection inside it:

public class AppointmentsViewModel
{
    public AppointmentsViewModel()
    {
        var date = DateTime.Today;
        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,
                    EndDate = date.AddHours(11),
                    Color = Color.Orange,
                    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; }
}

Then, add the RadCalendar definition to your page:

<telerikInput:RadCalendar x:Name="calendar"
                          IsAddAppointmentButtonVisible="True"
                          AddAppointmentButtonClicked="calendar_AddAppointmentButtonClicked"
                          AppointmentsSource="{Binding Appointments}"
                          SchedulingUiEnabled="True">
    <telerikInput:RadCalendar.BindingContext>
        <local:AppointmentsViewModel />
    </telerikInput:RadCalendar.BindingContext>    
</telerikInput:RadCalendar>

Figure 1: Appearance of the RadCalendar control in month view mode

Appointments monthview

Figure 2: Appearance of the RadCalendar control in day view mode

Appointments dayview

Add Appointment Button

With R2 2020 Release of Telerik UI for Xamarin RadCalendar control provides you the option to add appointments using the calendar's Add Appointment Button. By default the add appointment button is not visible. In order to display it on the screen you need to use the following porperty:

  • IsAddAppointmentVisible(bool): Specifies whether the add appointment button will be visible. If you want to add appointments using the button you need to set the IsAddAppointmentVisible to True.
<telerikInput:RadCalendar x:Name="calendar"
                          IsAddAppointmentButtonVisible="True"
                          AddAppointmentButtonClicked="calendar_AddAppointmentButtonClicked"
                          AppointmentsSource="{Binding Appointments}"
                          SchedulingUiEnabled="True">
    <telerikInput:RadCalendar.BindingContext>
        <local:AppointmentsViewModel />
    </telerikInput:RadCalendar.BindingContext>    
</telerikInput:RadCalendar>
  • In addition the add appointment button has an event AddAppointmentButtonClicked which occurs when the Button within the Calendar is tapped. Telerik.XamarinForms.Input.IsAddAppointmentButtonVisible controls the visibility of the button.
private void calendar_AddAppointmentButtonClicked(object sender, AddAppointmentButtonClickedEventArgs e)
{
    // implement your logic here
}

The image below shows where is the button position when IsAddAppointmentVisible="True":

Appointment Button

Appointment Template

With R3 2019 Release of Telerik UI for Xamarin RadCalendar control provides the option to apply a ContentTemplate to the Appointments for DayView and MultiDayView. You could easily set a Template or TemplateSelector to the appointments through the AppointmentContentTemplate property of the DayViewSettings or MultiDaySettings.

  • AppointmentContentTemplate (DataTemplate): Defines the DataTemplate of the Appointment based on the data object.

Appointment Template in DayView and MultiDayView

Appointment Template Overview

Appointment Template Example

The following example shows how to set AppointmentContentTemplate in DayView Mode using DataTemplateSelector.

First, create a ViewModel class with a collection of Appointment objects:

public class AppointmentsTemplateViewModel
{
    public AppointmentsTemplateViewModel()
    {
        var date = DateTime.Today;
        this.Appointments = new ObservableCollection<Appointment>
        {
            new Appointment{ Title = "Tom Birthday", IsAllDay = true, Color = Color.FromHex("#C1D8FF"), Detail ="Buy present!", StartDate = date, EndDate = date.AddHours(12)},
            new Appointment{ Title = "Lunch with Sara", IsAllDay = false, Color = Color.FromHex("#EDFDE3"), Detail ="Discuss the new marketing strategy", StartDate = date.AddDays(1).AddHours(12), EndDate = date.AddDays(1).AddHours(13).AddMinutes(30)},
            new Appointment{ Title = "Security Training", IsAllDay = false, Color = Color.FromHex("#EDFDE3"), Detail ="Details for the event come here", StartDate = date.AddHours(15), EndDate = date.AddHours(16)},
            new Appointment{ Title = "Elle Birthday", IsAllDay = true, Color = Color.FromHex("#FFF1F9"), Detail ="Buy present!", StartDate = date.AddDays(1), EndDate = date.AddDays(1).AddHours(12)},
            new Appointment{ Title = "One to One Meeting", IsAllDay = false, Color = Color.FromHex("#EBF2FD"), Detail ="Details for the event come here - for example place, participants and add information", StartDate = date.AddHours(16), EndDate = date.AddHours(17)},
            new Appointment{ Title = "Marathon", IsAllDay = false, Color = Color.FromHex("#FDE2AC"), Detail ="Enjoy running", StartDate = date.AddHours(8), EndDate = date.AddHours(11)},
        };
    }
    public ObservableCollection<Appointment> Appointments { get; set; }
}

Create a custom appointment template selector class which inherits from DataTemplateSelector and override the OnSelectTemplate method:

public class DayViewAppointmentTemplateSelector : DataTemplateSelector
{
    public DataTemplate AllDay { get; set; }
    public DataTemplate NotAllDay { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var appointmentsTemplate = item as Appointment;

        if (appointmentsTemplate.IsAllDay)
        {
            return this.AllDay;
        }
        return this.NotAllDay;
    }
}

Add the created DayViewAppointmentTemplateSelector as a Resource and define both DataTemplates:

<local:DayViewAppointmentTemplateSelector x:Key="DayViewAppointmentTemplateSelector">
    <local:DayViewAppointmentTemplateSelector.AllDay>
        <DataTemplate>
            <Grid>
                <Label Text="{Binding Title}" FontSize="16" TextColor="Black"/>
            </Grid>
        </DataTemplate>
    </local:DayViewAppointmentTemplateSelector.AllDay>
    <local:DayViewAppointmentTemplateSelector.NotAllDay>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackLayout>
                    <Label Text="{Binding Title}" FontSize="20" TextColor="Black"/>
                    <Label Text="{Binding Detail}" FontSize="14" TextColor="Black"/>
                </StackLayout>
                <Image Source="favourite.png" VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="1"/>
            </Grid>
        </DataTemplate>
    </local:DayViewAppointmentTemplateSelector.NotAllDay>
</local:DayViewAppointmentTemplateSelector>

Finally, set the AppointmentContentTemplate property of the DayViewSettings:

<telerikInput:RadCalendar x:Name="calendar"
                          ViewMode="Day"
                          AppointmentsSource="{Binding Appointments}"
                          SchedulingUiEnabled="True">
    <telerikInput:RadCalendar.BindingContext>
        <local:AppointmentsTemplateViewModel/>
    </telerikInput:RadCalendar.BindingContext>
    <telerikInput:RadCalendar.DayViewSettings>
        <telerikInput:DayViewSettings AppointmentContentTemplate="{StaticResource DayViewAppointmentTemplateSelector}"/>
    </telerikInput:RadCalendar.DayViewSettings>
</telerikInput:RadCalendar>

Here is the result:

Appointment Content Template

SDK Browser application contains a sample Appointments Template example. You can find it in the Calendar & Scheduling /Features folder.

Events

AppointmentTapped(AppointmentTappedEventArgs): Occurs when you tap over a specific appointment when in DayView or MultiDayView mode. It can be used to get all the information regarding the appointment.

AppointmentTapped Example

First you need to set the ViewMode to Day:

calendar.ViewMode = CalendarViewMode.Day;

Eventually, you can utilize the event:

calendar.AppointmentTapped += (sender, e) =>
{
    Application.Current.MainPage.DisplayAlert(e.Appointment.Title, e.Appointment.Detail, "OK");
};

See Also

In this article
Not finding the help you need? Improve this article