Calendar appointment rounded corner
Environment
Product Version | 2022.1.331.1 |
Product | Calendar for Xamarin Cross-Platform |
Description
This article explains how to apply corner radius to calendar appointments in day view or multiday view modes.
Solution
- Use Calendar AppointmentTemplate feature.
The AppointmentContentTemplate property is applied to the appointment content, not to the template itself, and the border corner radius is applied only to the content inside the template.
-
Add Border inside the template and set corner radious to the border. The appointment template is defined inside the page's resources.
<ContentPage.Resources> <ResourceDictionary> <!-- >> calendar-appointments-template-selector --> <local:RoundedAppointmentTemplateSelector x:Key="RoundedAppointmentTemplateSelector"> <local:RoundedAppointmentTemplateSelector.AllDay> <DataTemplate> <primitives:RadBorder BackgroundColor="{Binding MainBackgroundColor}" CornerRadius="5" BorderColor="Black"> <Label Text="{Binding Title}" FontSize="16" TextColor="Black"/> </primitives:RadBorder> </DataTemplate> </local:RoundedAppointmentTemplateSelector.AllDay> <local:RoundedAppointmentTemplateSelector.NotAllDay> <DataTemplate> <primitives:RadBorder BackgroundColor="{Binding MainBackgroundColor}" CornerRadius="5"> <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> </primitives:RadBorder> </DataTemplate> </local:RoundedAppointmentTemplateSelector.NotAllDay> </local:RoundedAppointmentTemplateSelector> <!-- << calendar-appointments-template-selector --> </ResourceDictionary> </ContentPage.Resources>
And the RoundedAppointmentTemplateSelector implementation
public class RoundedAppointmentTemplateSelector : 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; } }
-
Create a class that inherits from
Telerik.XamarinForms.Input.Appointment
class and define aColor
property. For example,public class Mainappointment : Appointment { public Color MainBackgroundColor { get; set; } }
- Set the Appointment Color property to
Transparent
for all appointments and set different colors to theMainBackgroundColor
.
public class AppointmentsTemplateViewModel { public AppointmentsTemplateViewModel() { var date = DateTime.Today; this.Appointments = new ObservableCollection<Mainappointment> { new Mainappointment{ Title = "Tom Birthday", IsAllDay = true, Color = Color.Transparent, Detail ="Buy present!", StartDate = date, EndDate = date.AddHours(12), MainBackgroundColor = Color.LightCyan}, new Mainappointment{ Title = "Lunch with Sara", IsAllDay = false, Color = Color.Transparent, Detail ="Discuss the new marketing strategy", StartDate = date.AddDays(1).AddHours(12), EndDate = date.AddDays(1).AddHours(13).AddMinutes(30), MainBackgroundColor = Color.LightGray}, new Mainappointment{ Title = "Security Training", IsAllDay = false, Color = Color.Transparent, Detail ="Details for the event come here", StartDate = date.AddHours(15), EndDate = date.AddHours(16), MainBackgroundColor = Color.LightCoral}, new Mainappointment{ Title = "Elle Birthday", IsAllDay = true, Color = Color.Transparent, Detail ="Buy present!", StartDate = date.AddDays(1), EndDate = date.AddDays(1).AddHours(12), MainBackgroundColor = Color.LightGreen}, }; } public ObservableCollection<Mainappointment> Appointments { get; set; } }
- Set the Appointment Color property to
-
Bind the
MainBackgroundColor
to theRadBorder
BackgroundColor
property, to gridBackgroundColor
, or stackBackgroundColor
, etc. The RadCalendar definition with Appointment ContentTemplate set for DayView, MultiDayView and binded Border Color:<telerikInput:RadCalendar x:Name="calendar" ViewMode="Day" AppointmentsSource="{Binding Appointments}" SchedulingUiEnabled="True"> <telerikInput:RadCalendar.BindingContext> <local:AppointmentsTemplateViewModel/> </telerikInput:RadCalendar.BindingContext> <telerikInput:RadCalendar.MultiDayViewSettings> <telerikInput:MultiDayViewSettings AppointmentContentTemplate="{StaticResource RoundedAppointmentTemplateSelector}"/> </telerikInput:RadCalendar.MultiDayViewSettings> <telerikInput:RadCalendar.DayViewSettings> <telerikInput:DayViewSettings AppointmentContentTemplate="{StaticResource RoundedAppointmentTemplateSelector}"/> </telerikInput:RadCalendar.DayViewSettings> </telerikInput:RadCalendar>