How to customize appointment appearance in .NET MAUI Scheduler?
The .NET MAUI Scheduler allows you to customize the default appearance of appointments using the AppointmentTemplate property. You can tailor these templates based on specific conditions using a DataTemplateSelector.
The BindingContext of the AppointmentTemplate is the SchedulerAppointment. You can use SchedulerAppointment properties to bind the details in the data template.
CS
Define a class called `AppointmentTemplateSelector` and implement the DataTemplate APIs according to the requirements.
In this case, two DataTemplates are defined: one for today's dates and another for normal dates.
public class AppointmentTemplateSelector : DataTemplateSelector
{
public AppointmentTemplateSelector()
{
}
public DataTemplate NormalDateTemplate { get; set; }
public DataTemplate TodayDateTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var schedulerAppointment = item as SchedulerAppointment;
if (schedulerAppointment.ActualStartTime.Date == DateTime.Today.Date)
return TodayDateTemplate;
else
return NormalDateTemplate;
}
}
CS
Populate the Scheduler with appointments, specifying their start and end times.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.Scheduler.View = SchedulerView.Week;
var appointments = new ObservableCollection<SchedulerAppointment>();
appointments.Add(new SchedulerAppointment()
{
Subject = "Meeting",
StartTime = DateTime.Today.Date.AddHours(9),
EndTime = DateTime.Today.Date.AddHours(10),
});
appointments.Add(new SchedulerAppointment()
{
Subject = "Project plan",
StartTime = DateTime.Today.Date.AddDays(1).AddHours(10),
EndTime = DateTime.Today.Date.AddDays(1).AddHours(11),
});
this.Scheduler.AppointmentsSource = appointments;
}
}
XAML
Assign the DataTemplateSelector to the AppointmentTemplate property to select the DataTemplate based on the today and normal dates.
<Grid>
<Grid.Resources>
<DataTemplate x:Key="normalDateTemplate">
<Grid Background="LightGreen">
<Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black" FontSize="12" Text="{Binding Subject}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="todayDateTemplate">
<Grid Background="MediumPurple">
<Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" TextColor="White" FontSize="12" Text="{Binding Subject}" />
</Grid>
</DataTemplate>
<local:AppointmentTemplateSelector x:Key="appointmentTemplateSelector" TodayDateTemplate="{StaticResource todayDateTemplate}" NormalDateTemplate="{StaticResource normalDateTemplate}"/>
</Grid.Resources>
<scheduler:SfScheduler x:Name="Scheduler"
View="Week" >
<scheduler:SfScheduler.DaysView>
<scheduler:SchedulerDaysView AppointmentTemplate="{StaticResource appointmentTemplateSelector}" />
</scheduler:SfScheduler.DaysView>
<scheduler:SfScheduler.TimelineView>
<scheduler:SchedulerTimelineView AppointmentTemplate="{StaticResource appointmentTemplateSelector}" />
</scheduler:SfScheduler.TimelineView>
<scheduler:SfScheduler.MonthView>
<scheduler:SchedulerMonthView AppointmentTemplate="{StaticResource appointmentTemplateSelector}" />
</scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>
</Grid>
Download the complete sample on GitHub.
|
Conclusion
I hope you enjoyed learning how to customize appointment appearances in the .NET MAUI Scheduler.
You can refer to our .NET MAUI Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. Explore our .NET MAUI Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
