How to customize the All-Day appointment using DataTemplate in the .NET MAUI Scheduler (SfScheduler)?
In the .NET MAUI Scheduler, all-day and span appointments are displayed in a separate layout for the day, week, and workweek views. The appearance of these appointments can be customized using the AllDayAppointmentTemplate property of SchedulerDaysView.
The SchedulerAppointment is set as the BindingContext for AllDayAppointmentTemplate for both SchedulerAppointment and custom data object. You can use the binding context SchedulerAppointment properties in the data template based on your requirement.
This customization is applicable only for the day, week, and workweek views.
STEP 1:
Define the data template for the all-day appointment in your resources.
<Grid.Resources>
<DataTemplate x:Key="allDayAppointmentTemplate">
<Grid BackgroundColor="Yellow">
<Label Text="{Binding Data.EventName}" VerticalOptions="Center" TextColor="Green" LineBreakMode="WordWrap" MaxLines="2" FontSize="Caption" FontAttributes="Bold"/>
</Grid>
</DataTemplate>
</Grid.Resources>
STEP 2:
Implement the behavior to create and add an all-day appointment to the scheduler.
internal class ScheduleBehavior : Behavior<Syncfusion.Maui.Scheduler.SfScheduler>
{
/// <summary>
/// Holds the appointment source collection.
/// </summary>
private ObservableCollection<Meeting>? appointments;
/// <summary>
/// Holds the scheduler object
/// </summary>
private Scheduler? scheduler;
protected override void OnAttachedTo(Syncfusion.Maui.Scheduler.SfScheduler bindable)
{
base.OnAttachedTo(bindable);
this.scheduler = bindable;
bindable.ViewChanged += this.OnSchedulerViewChanged;
}
private void OnSchedulerViewChanged(object? sender, SchedulerViewChangedEventArgs e)
{
if (this.scheduler == null || e.NewVisibleDates == null)
{
return;
}
appointments = new ObservableCollection<Meeting>();
Meeting meeting = new();
meeting.Background = Colors.Red;
meeting.From = DateTime.Now.AddDays(1).AddHours(10);
meeting.To = DateTime.Now.AddDays(1).AddHours(12);
meeting.EventName = "AllDayAppointment";
meeting.Notes = "All day";
meeting.IsAllDay = true;
appointments.Add(meeting);
this.scheduler.AppointmentsSource = appointments;
}
protected override void OnDetachingFrom(Syncfusion.Maui.Scheduler.SfScheduler bindable)
{
base.OnDetachingFrom(bindable);
this.scheduler = null;
bindable.ViewChanged -= this.OnSchedulerViewChanged;
}
}
STEP 3:
Use the defined template in the AllDayAppointmentTemplate.
<schedule:SfScheduler x:Name="Scheduler"
View="TimelineDay" AllowedViews="Day,Week,WorkWeek,TimelineDay,TimelineWeek,TimelineWorkWeek">
<schedule:SfScheduler.AppointmentMapping>
<schedule:SchedulerAppointmentMapping
Subject="EventName"
StartTime="From"
EndTime="To"
Background="Background"
IsAllDay="IsAllDay"
StartTimeZone="StartTimeZone"
EndTimeZone="EndTimeZone"
RecurrenceExceptionDates="RecurrenceExceptions"
RecurrenceRule="RecurrenceRule"
RecurrenceId="RecurrenceId"/>
</schedule:SfScheduler.AppointmentMapping>
<scheduler:SfScheduler.DaysView>
<scheduler:SchedulerDaysView
AllDayAppointmentTemplate="{StaticResource allDayAppointmentTemplate}"/>
</scheduler:SfScheduler.DaysView>
<scheduler:SfScheduler.Behaviors>
<local:ScheduleBehavior/>
</scheduler:SfScheduler.Behaviors>
</schedule:SfScheduler>
Output
|
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to customize the all-day appointment using DataTemplate 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.
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!
