Rank 1
Iron
Hello,
We have recently migrated from Telerik UI for Xamarin to Telerik UI for .NET MAUI.
One thing we are trying to wrap our heads around is how to set a small coloured dot next to the appointment on the month view for telerik:RadScheduler, rather than a background. I've attached 2 screenshots. One is Xamarin with a dot, where it was a simple XAML shape property. And MAUI which uses a background.
I would appreciate it if someone would steer us toward the right direction please :)
2 Answers, 1 is accepted
Hello Matthew,
Thank you for migrating to .NET MAUI.
The Telerik MAUI Scheduler is a new control different than the Telerik Xamarin Scheduler. In order to achieve similar look you can use the AppointmentTemplate of the Telerik MAUI Scheduler and add a dot to the appointment text. For example, you can use RadBorder for the dot.
<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>
<telerik:RadScheduler x:Name="scheduler"
AppointmentsSource="{Binding Appointments}"
AppointmentTemplate="{StaticResource CustomAppointmentDataTemplate}">
<telerik:RadScheduler.ViewDefinitions>
<telerik:MonthViewDefinition />
</telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>and the code behind:
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 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)
}
};
}
public ObservableCollection<Appointment> Appointments { get; set; }
}Hope this helps.
Regards,
Didi
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Rank 1
Iron
Hello Didi,
Thank you for your answer, we are going to give this a try.
One other thing, I hope it's ok to add as it's involves the same control.
How would we go about making weekend columns a different colour in month view? At first glance it appears the special slots could help with this, but I've noticed it's only available for weekends, is there a reason SpecialSlotStyleSelector is not available for MonthViewDefinition?
https://docs.telerik.com/devtools/maui/controls/scheduler/styling/special-slots-styling
- I'm not sure how to delete answers/comments - I've now created a new question, as I realise it would benefit other users when searching for questions.
