New to Telerik UI for Xamarin? Download free 30-day trial

Customize Scheduling UI

Environment

Product Version 2020.3.1021.1
Product Calendar for Xamarin Cross-Platform

Description

This help article will show you how to customize the following Calendar Scheduling UI Views - Add Appointment View and Appointment Summary View

Solution

  1. Let's add the following calendar definition to our page:
<telerikInput:RadCalendar x:Name="calendar"
                          AppointmentsSource="{Binding AppointmentsSource}"
                          SchedulingUiEnabled="True"
                          ViewMode="MultiDay"/>

and the following namespace:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
  1. Then we will create a custom appointment class and define our property - MeetingOwner:
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
  1. Create a class ViewModel and add appointments to the Calendar.AppointmentsSource: 
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
  1. Inside the Resources of the App.xaml file we will customize our AddAppointment and AppointmentSummary Views. We can copy the default AddAppointmentView ControlTemplate and AppointmentSummaryView ControlTemplate then add an UI for our data for the custom appointment:

Here are how the Custom Views are defined in the App.xaml resources

Add Appointment View

<telerikCommon:InvertedBooleanConverter x:Key="InvertedBooleanConverter"/>

<Style x:Key="EditorTitleLabelStyle" TargetType="Label">
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="FontSize" Value="{TemplateBinding EditorFontSize}" />
    <Setter Property="TextColor" Value="{TemplateBinding EditorTextColor}" />
</Style>

<Style x:Key="EditorSeparatorStyle" TargetType="telerikPrimitives:RadBorder">
    <Setter Property="BorderColor" Value="{TemplateBinding SeparatorColor}" />
    <Setter Property="BorderThickness" Value="{TemplateBinding SeparatorThickness}" />
</Style>

<Style x:Key="EditorGridStyle" TargetType="Grid">
    <Setter Property="HeightRequest" Value="{OnPlatform iOS=44, Default=48}" />
</Style>

<Style x:Key="DefaultButtonStyle" TargetType="Button">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="CornerRadius" Value="0"/>
    <Setter Property="BackgroundColor" Value="{TemplateBinding ButtonBackgroundColor}" />
    <Setter Property="TextColor" Value="{TemplateBinding ButtonTextColor}" />
    <Setter Property="HeightRequest" Value="44" />
</Style>

<ControlTemplate x:Key="AddAppointmentViewControlTemplate">
    <Grid RowSpacing="0" 
          BackgroundColor="{TemplateBinding BackgroundColor}"
          BindingContext="{TemplateBinding BindingContext}">
        <telerikPrimitives:RadPopup.Popup>
            <telerikPrimitives:RadPopup IsOpen="{Binding IsPopupOpen}"
                                        Content="{Binding PopupContent}"
                                        VerticalOffset="{Binding PopupVerticalOffset}"
                                        Placement="Center"
                                        AnimationType="Fade"
                                        OutsideBackgroundColor="#6F000000">
            </telerikPrimitives:RadPopup>
        </telerikPrimitives:RadPopup.Popup>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ScrollView >
            <StackLayout Padding="16, 20, 16, 0" 
                         Spacing="0">

                <!--Screen Title-->
                <Label Text="{telerikCommon:Localize Calendar_AppointmentEventTitle}"
                       FontAttributes="Bold"
                       FontSize="{TemplateBinding TitleFontSize}"
                       TextColor="{TemplateBinding TitleTextColor}"
                       HorizontalOptions="Start" />

                <!--Appointment Title-->
                <telerikPrimitives:RadBorder BorderColor="{TemplateBinding SeparatorColor}" 
                                             Margin="{OnPlatform iOS='0, 23, 0, 20', Default='0, 23, 0, 14'}"
                                             BorderThickness="{OnPlatform iOS=1, Default=0}"
                                             CornerRadius="{OnPlatform iOS=10}">

                    <Entry Text="{Binding Appointment.Title}" 
                           FontSize="{TemplateBinding EditorFontSize}"
                           TextColor="{TemplateBinding EditorTextColor}"
                           Placeholder="{telerikCommon:Localize Calendar_AppointmentTitlePlaceholder}">
                    </Entry>

                </telerikPrimitives:RadBorder>

                <!--Appointment AllDay-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentAllDay}"
                               Style="{StaticResource EditorTitleLabelStyle}" />

                        <Switch OnColor="{TemplateBinding AllDaySwitchOnColor}"
                                BackgroundColor="{TemplateBinding AllDaySwitchBackgroundColor}"
                                IsToggled="{Binding Appointment.IsAllDay}" 
                                HorizontalOptions="End" />
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment Start Date and Start Time-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentStarts}" 
                               Style="{StaticResource EditorTitleLabelStyle}" />

                        <StackLayout Orientation="Horizontal" 
                                     HorizontalOptions="End" 
                                     VerticalOptions="Center">
                            <DatePicker Date="{Binding StartDate}" 
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        Format="dd MMM yyyy" 
                                        Margin="0, 0, 5, 0">
                                <DatePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </DatePicker.Effects>
                            </DatePicker>
                            <TimePicker Time="{Binding StartTime}" 
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        IsVisible="{Binding Appointment.IsAllDay, Converter={StaticResource InvertedBooleanConverter}}">
                                <TimePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </TimePicker.Effects>
                            </TimePicker>
                        </StackLayout>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment End Date and End Time-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentEnds}"
                               Style="{StaticResource EditorTitleLabelStyle}" />

                        <StackLayout Orientation="Horizontal" 
                                     HorizontalOptions="End" 
                                     VerticalOptions="Center">
                            <DatePicker Date="{Binding EndDate}" 
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        Format="dd MMM yyyy"
                                        Margin="0, 0, 5, 0"
                                        HorizontalOptions="End">
                                <DatePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </DatePicker.Effects>
                            </DatePicker>
                            <TimePicker Time="{Binding EndTime}"
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        IsVisible="{Binding Appointment.IsAllDay, Converter={StaticResource InvertedBooleanConverter}}"
                                        HorizontalOptions="End">
                                <TimePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </TimePicker.Effects>
                            </TimePicker>
                        </StackLayout>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!-- Appointment Owner -->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Margin="0,3,0,3">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Label Text="Meeting Owner"
                               Style="{StaticResource EditorTitleLabelStyle}"/>
                        <Entry Text="{Binding Appointment.Owner, Mode=TwoWay}"
                               Placeholder="Meeting Owner"
                               WidthRequest="200"
                               HorizontalOptions="End"
                               FontSize="{TemplateBinding EditorFontSize}"
                               TextColor="{TemplateBinding EditorTextColor}"
                               Grid.Column="1"/>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment Color-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentColor}"
                               Style="{StaticResource EditorTitleLabelStyle}" />
                        <Grid HorizontalOptions="End">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding ShowColorPickerViewCommand}" />
                            </Grid.GestureRecognizers>
                            <telerikPrimitives:RadBorder VerticalOptions="Center"
                                                         HorizontalOptions="End"
                                                         Grid.Column="0"
                                                         HeightRequest="26"
                                                         WidthRequest="26"
                                                         CornerRadius="13"
                                                         Margin="0"
                                                         BorderColor="{Binding Appointment.Color, Mode=TwoWay}"
                                                         BackgroundColor="Transparent"
                                                         BorderThickness="2">

                                <telerikPrimitives:RadBorder VerticalOptions="Center"
                                                             HorizontalOptions="Center"
                                                             CornerRadius="9"
                                                             HeightRequest="18" 
                                                             WidthRequest="18"
                                                             Margin="1, 0, 0, 0"
                                                             BackgroundColor="{Binding Appointment.Color, Mode=TwoWay}"/>

                            </telerikPrimitives:RadBorder>
                            <Label telerikCommon:TelerikFont.UseEmbeddedFont="True"
                                   Grid.Column="1"
                                   Margin="2"
                                   VerticalOptions="Center"
                                   FontSize="{TemplateBinding EditorFontSize}"
                                   TextColor="{TemplateBinding EditorTextColor}"
                                   Text="&#xe805;" />
                        </Grid>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment Detail-->
                <Editor Text="{Binding Appointment.Detail}"
                        FontSize="{TemplateBinding EditorFontSize}"
                        TextColor="{TemplateBinding EditorTextColor}"
                        AutoSize="TextChanges"
                        Margin="{OnPlatform iOS='0, 23, 0, 20', Default='0, 23, 0, 14'}"
                        Placeholder="{telerikCommon:Localize Calendar_DetailsEditorPlaceholderText}">
                    <Editor.Effects>
                        <telerikCommon:NoTextOffsetEffect />
                    </Editor.Effects>
                </Editor>
            </StackLayout>
        </ScrollView>

        <telerikPrimitives:RadBorder BorderColor="#C8C7CC"
                                     BorderThickness="0, 1, 0, 0" 
                                     Grid.Row="1">
            <Grid ColumnSpacing="0">
                <Button Grid.Column="0"
                        Command="{Binding CancelCommand}"
                        Style="{StaticResource DefaultButtonStyle}"
                        Text="{telerikCommon:Localize Calendar_AppointmentCancelButton}" />

                <Button Grid.Column="1"
                        Command="{Binding SaveAppointmentCommand}"
                        Style="{StaticResource DefaultButtonStyle}"
                        Text="{telerikCommon:Localize Calendar_AppointmentOKButton}" />
            </Grid>
        </telerikPrimitives:RadBorder>
    </Grid>
</ControlTemplate>

<Style TargetType="telerikInput:AddAppointmentView">
    <Setter Property="ControlTemplate" Value="{StaticResource AddAppointmentViewControlTemplate}"/>
</Style>

You will need the following namespaces: 

xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common" 
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives" 
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

Note that when you customize the control template using ControlTemplate property, you need to define first the control template then the style in the App.xaml Resources. 

<Style TargetType="telerikInput:AddAppointmentView">
    <Setter Property="ControlTemplate" Value="{StaticResource AddAppointmentViewControlTemplate}"/>
</Style>

Appointment Summary View

<telerikCommon:InvertedBooleanConverter x:Key="InvertedBooleanConverter"/>

<Style x:Key="EditorTitleLabelStyle" TargetType="Label">
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="FontSize" Value="{TemplateBinding EditorFontSize}" />
    <Setter Property="TextColor" Value="{TemplateBinding EditorTextColor}" />
</Style>

<Style x:Key="EditorSeparatorStyle" TargetType="telerikPrimitives:RadBorder">
    <Setter Property="BorderColor" Value="{TemplateBinding SeparatorColor}" />
    <Setter Property="BorderThickness" Value="{TemplateBinding SeparatorThickness}" />
</Style>

<Style x:Key="EditorGridStyle" TargetType="Grid">
    <Setter Property="HeightRequest" Value="{OnPlatform iOS=44, Default=48}" />
</Style>

<Style x:Key="DefaultButtonStyle" TargetType="Button">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="CornerRadius" Value="0"/>
    <Setter Property="BackgroundColor" Value="{TemplateBinding ButtonBackgroundColor}" />
    <Setter Property="TextColor" Value="{TemplateBinding ButtonTextColor}" />
    <Setter Property="HeightRequest" Value="44" />
</Style>

<ControlTemplate x:Key="AddAppointmentViewControlTemplate">
    <Grid RowSpacing="0" 
          BackgroundColor="{TemplateBinding BackgroundColor}"
          BindingContext="{TemplateBinding BindingContext}">
        <telerikPrimitives:RadPopup.Popup>
            <telerikPrimitives:RadPopup IsOpen="{Binding IsPopupOpen}"
                                        Content="{Binding PopupContent}"
                                        VerticalOffset="{Binding PopupVerticalOffset}"
                                        Placement="Center"
                                        AnimationType="Fade"
                                        OutsideBackgroundColor="#6F000000">
            </telerikPrimitives:RadPopup>
        </telerikPrimitives:RadPopup.Popup>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ScrollView >
            <StackLayout Padding="16, 20, 16, 0" 
                         Spacing="0">

                <!--Screen Title-->
                <Label Text="{telerikCommon:Localize Calendar_AppointmentEventTitle}"
                       FontAttributes="Bold"
                       FontSize="{TemplateBinding TitleFontSize}"
                       TextColor="{TemplateBinding TitleTextColor}"
                       HorizontalOptions="Start" />

                <!--Appointment Title-->
                <telerikPrimitives:RadBorder BorderColor="{TemplateBinding SeparatorColor}" 
                                             Margin="{OnPlatform iOS='0, 23, 0, 20', Default='0, 23, 0, 14'}"
                                             BorderThickness="{OnPlatform iOS=1, Default=0}"
                                             CornerRadius="{OnPlatform iOS=10}">

                    <Entry Text="{Binding Appointment.Title}" 
                           FontSize="{TemplateBinding EditorFontSize}"
                           TextColor="{TemplateBinding EditorTextColor}"
                           Placeholder="{telerikCommon:Localize Calendar_AppointmentTitlePlaceholder}">
                    </Entry>

                </telerikPrimitives:RadBorder>

                <!--Appointment AllDay-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentAllDay}"
                               Style="{StaticResource EditorTitleLabelStyle}" />

                        <Switch OnColor="{TemplateBinding AllDaySwitchOnColor}"
                                BackgroundColor="{TemplateBinding AllDaySwitchBackgroundColor}"
                                IsToggled="{Binding Appointment.IsAllDay}" 
                                HorizontalOptions="End" />
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment Start Date and Start Time-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentStarts}" 
                               Style="{StaticResource EditorTitleLabelStyle}" />

                        <StackLayout Orientation="Horizontal" 
                                     HorizontalOptions="End" 
                                     VerticalOptions="Center">
                            <DatePicker Date="{Binding StartDate}" 
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        Format="dd MMM yyyy" 
                                        Margin="0, 0, 5, 0">
                                <DatePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </DatePicker.Effects>
                            </DatePicker>
                            <TimePicker Time="{Binding StartTime}" 
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        IsVisible="{Binding Appointment.IsAllDay, Converter={StaticResource InvertedBooleanConverter}}">
                                <TimePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </TimePicker.Effects>
                            </TimePicker>
                        </StackLayout>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment End Date and End Time-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentEnds}"
                               Style="{StaticResource EditorTitleLabelStyle}" />

                        <StackLayout Orientation="Horizontal" 
                                     HorizontalOptions="End" 
                                     VerticalOptions="Center">
                            <DatePicker Date="{Binding EndDate}" 
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        Format="dd MMM yyyy"
                                        Margin="0, 0, 5, 0"
                                        HorizontalOptions="End">
                                <DatePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </DatePicker.Effects>
                            </DatePicker>
                            <TimePicker Time="{Binding EndTime}"
                                        FontSize="{TemplateBinding EditorFontSize}"
                                        TextColor="{TemplateBinding EditorTextColor}"
                                        IsVisible="{Binding Appointment.IsAllDay, Converter={StaticResource InvertedBooleanConverter}}"
                                        HorizontalOptions="End">
                                <TimePicker.Effects>
                                    <telerikCommon:PickerRemoveBorderEffect />
                                </TimePicker.Effects>
                            </TimePicker>
                        </StackLayout>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!-- Appointment Owner -->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Margin="0,3,0,3">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Label Text="Meeting Owner"
                               Style="{StaticResource EditorTitleLabelStyle}"/>
                        <Entry Text="{Binding Appointment.Owner, Mode=TwoWay}"
                               Placeholder="Meeting Owner"
                               WidthRequest="200"
                               HorizontalOptions="End"
                               FontSize="{TemplateBinding EditorFontSize}"
                               TextColor="{TemplateBinding EditorTextColor}"
                               Grid.Column="1"/>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment Color-->
                <telerikPrimitives:RadBorder Style="{StaticResource EditorSeparatorStyle}">
                    <Grid Style="{StaticResource EditorGridStyle}">
                        <Label Text="{telerikCommon:Localize Calendar_AppointmentColor}"
                               Style="{StaticResource EditorTitleLabelStyle}" />
                        <Grid HorizontalOptions="End">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding ShowColorPickerViewCommand}" />
                            </Grid.GestureRecognizers>
                            <telerikPrimitives:RadBorder VerticalOptions="Center"
                                                         HorizontalOptions="End"
                                                         Grid.Column="0"
                                                         HeightRequest="26"
                                                         WidthRequest="26"
                                                         CornerRadius="13"
                                                         Margin="0"
                                                         BorderColor="{Binding Appointment.Color, Mode=TwoWay}"
                                                         BackgroundColor="Transparent"
                                                         BorderThickness="2">

                                <telerikPrimitives:RadBorder VerticalOptions="Center"
                                                             HorizontalOptions="Center"
                                                             CornerRadius="9"
                                                             HeightRequest="18" 
                                                             WidthRequest="18"
                                                             Margin="1, 0, 0, 0"
                                                             BackgroundColor="{Binding Appointment.Color, Mode=TwoWay}"/>

                            </telerikPrimitives:RadBorder>
                            <Label telerikCommon:TelerikFont.UseEmbeddedFont="True"
                                   Grid.Column="1"
                                   Margin="2"
                                   VerticalOptions="Center"
                                   FontSize="{TemplateBinding EditorFontSize}"
                                   TextColor="{TemplateBinding EditorTextColor}"
                                   Text="&#xe805;" />
                        </Grid>
                    </Grid>
                </telerikPrimitives:RadBorder>

                <!--Appointment Detail-->
                <Editor Text="{Binding Appointment.Detail}"
                        FontSize="{TemplateBinding EditorFontSize}"
                        TextColor="{TemplateBinding EditorTextColor}"
                        AutoSize="TextChanges"
                        Margin="{OnPlatform iOS='0, 23, 0, 20', Default='0, 23, 0, 14'}"
                        Placeholder="{telerikCommon:Localize Calendar_DetailsEditorPlaceholderText}">
                    <Editor.Effects>
                        <telerikCommon:NoTextOffsetEffect />
                    </Editor.Effects>
                </Editor>
            </StackLayout>
        </ScrollView>

        <telerikPrimitives:RadBorder BorderColor="#C8C7CC"
                                     BorderThickness="0, 1, 0, 0" 
                                     Grid.Row="1">
            <Grid ColumnSpacing="0">
                <Button Grid.Column="0"
                        Command="{Binding CancelCommand}"
                        Style="{StaticResource DefaultButtonStyle}"
                        Text="{telerikCommon:Localize Calendar_AppointmentCancelButton}" />

                <Button Grid.Column="1"
                        Command="{Binding SaveAppointmentCommand}"
                        Style="{StaticResource DefaultButtonStyle}"
                        Text="{telerikCommon:Localize Calendar_AppointmentOKButton}" />
            </Grid>
        </telerikPrimitives:RadBorder>
    </Grid>
</ControlTemplate>

<Style TargetType="telerikInput:AddAppointmentView">
    <Setter Property="ControlTemplate" Value="{StaticResource AddAppointmentViewControlTemplate}"/>
</Style>

You will need the following namespaces: 

xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives" 
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

Note that when you customize the control template using ControlTemplate property, you need to define first the control template then the style in the App.xaml Resources. 

<Style TargetType="telerikInput:AppointmentSummaryView">
    <Setter Property="ControlTemplate" Value="{StaticResource AppointmentSummaryViewControlTemplate}"/>
</Style>
In this article
Related articles
Not finding the help you need? Improve this article