Customizing Appointments in Telerik UI for .NET MAUI Scheduler
Environment
Version | Product | Author |
---|---|---|
7.0.0 | Telerik UI for .NET MAUI Scheduler | Dobrinka Yordanova |
Description
I am migrating my scheduler functionality from Telerik UI for Xamarin to Telerik UI for .NET MAUI. I need to display a small colored dot next to the appointment in the month view in the Scheduler, rather than using a background color.
This KB article also answers the following questions:
- How can I use the
AppointmentTemplate
to customize appointments in Telerik UI for .NET MAUI Scheduler? - Is it possible to display a dot next to an appointment in the month view of the Scheduler?
- How to customize the appearance of appointments in the Telerik UI for .NET MAUI Scheduler?
Solution
To customize the appointment display in Telerik UI for .NET MAUI Scheduler to show a colored dot instead of a background color, you can utilize the AppointmentTemplate
. Here's an example using RadBorder
to create the dot alongside the appointment text.
- Define the custom appointment data template in your page's resources:
<ContentPage.Resources>
<ResourceDictionary>
<local:CustomAppointmentDataTemplate x:Key="CustomAppointmentDataTemplate">
<local:CustomAppointmentDataTemplate.AllDayAppointmentTemplate>
<DataTemplate>
<HorizontalStackLayout>
<telerik:RadBorder WidthRequest="10"
HeightRequest="10"
CornerRadius="5"
BackgroundColor="Aqua" />
<Label Text="{Binding Occurrence.Appointment.Subject}"
TextColor="Black" Margin="6, 0, 4, 0"
VerticalTextAlignment="Center" />
</HorizontalStackLayout>
</DataTemplate>
</local:CustomAppointmentDataTemplate.AllDayAppointmentTemplate>
<local:CustomAppointmentDataTemplate.AppointmentTemplate>
<DataTemplate>
<HorizontalStackLayout>
<telerik:RadBorder WidthRequest="10" HeightRequest="10" CornerRadius="5"
BackgroundColor="#8660C5"
HorizontalOptions="Start" />
<Label Text="{Binding Occurrence.Appointment.Subject}"
VerticalTextAlignment="Center"
TextColor="Black"
Margin="6, 0, 4, 0" />
</HorizontalStackLayout>
</DataTemplate>
</local:CustomAppointmentDataTemplate.AppointmentTemplate>
</local:CustomAppointmentDataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
- Apply the custom template to the
RadScheduler
:
<telerik:RadScheduler x:Name="scheduler"
AppointmentsSource="{Binding Appointments}"
AppointmentTemplate="{StaticResource CustomAppointmentDataTemplate}">
<telerik:RadScheduler.ViewDefinitions>
<telerik:MonthViewDefinition />
</telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>
- Implement the
CustomAppointmentDataTemplate
class and the ViewModel in your code-behind or view model file:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new ViewModel();
}
}
public class CustomAppointmentDataTemplate : DataTemplateSelector
{
public DataTemplate AllDayAppointmentTemplate { get; set; }
public DataTemplate AppointmentTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var appointment = (item as AppointmentNode).Occurrence.Appointment;
if (appointment.IsAllDay || (appointment.End - appointment.Start).TotalDays > 1)
{
return this.AllDayAppointmentTemplate;
}
return this.AppointmentTemplate;
}
}
public class ViewModel
{
public ObservableCollection<Appointment> Appointments { get; set; }
public ViewModel()
{
var date = DateTime.Today;
this.Appointments = new ObservableCollection<Appointment>
{
new Appointment {
Subject = "Meeting with Tom",
Start = date.AddHours(10),
End = date.AddHours(11)
},
new Appointment {
Subject = "Lunch with Sara",
Start = date.AddHours(12).AddMinutes(30),
End = date.AddHours(14)
},
new Appointment {
Subject = "Elle Birthday",
Start = date,
End = date.AddHours(11),
IsAllDay = true
},
new Appointment {
Subject = "Football Game",
Start = date.AddDays(2).AddHours(15),
End = date.AddDays(2).AddHours(17)
}
};
}
}
This approach allows you to customize the appearance of appointments in the Telerik UI for .NET MAUI Scheduler to include a colored dot, similar to the previous Xamarin implementation.