xamarin-forms-docs/knowledge-base/calendar-custom-scheduling-ui.md

title	description	type	page_title	slug	tags	res_type
Customize Scheduling UI	How to customize Add Appointmnet and Summary Scheduling Views in Calendar and Scheduling for Xamarin	how-to	Remove the day and month title from Calendar view	calendar-custom-scheduling-ui	calendar, control, Xamarin, XamarinForms, scheduler, scheduling, custom, UI, addappointment, summary, view, customize, custom appointment UI	kb

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]({%slug calendar-add-appointment-view%}) and [Appointment Summary View]({%slug calendar-appointment-summary-view%})

Solution

1. Let's add the following calendar definition to our page:

and the following namespace:

2. Then we will create a custom appointment class and define our property - MeetingOwner:

3. Create a class ViewModel and add appointments to the Calendar.AppointmentsSource:

4. 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

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

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>