How to customize the non-working hour's timeslot using the DataTemplate in the .NET MAUI Scheduler (SfScheduler) days view and timeline views?
In .NET MAUI Scheduler, you can highlight the timeslots of working and non-working hours of the day, week, workweek, timeline day, timeline week, and timeline workweek views using the TimeRegions property of the DaysView and TimelineView. The appearance of these regions can be customized using the TimeRegionTemplate property.
The BindingContext of the TimeRegionTemplate is the SchedulerTimeRegion.
XAML
Define the TimeRegionTemplate within your XAML to customize the appearance of the timeslot for non-working hours.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SpecialRegionsTemplate.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}"
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<Grid>
<Grid.Resources>
<DataTemplate x:Key="specialRegionsTemplate">
<Grid Background="MediumPurple" >
<Label HorizontalOptions="Center" TextColor="White" VerticalOptions="Center" Text="{Binding Text}" />
</Grid>
</DataTemplate>
</Grid.Resources>
<scheduler:SfScheduler x:Name="Scheduler"
View="Month" AllowedViews="Day,Week,WorkWeek,TimelineDay,TimelineWeek,TimelineWorkWeek,TimelineMonth">
<scheduler:SfScheduler.DaysView>
<scheduler:SchedulerDaysView TimeRegionTemplate="{StaticResource specialRegionsTemplate}"
/>
</scheduler:SfScheduler.DaysView>
<scheduler:SfScheduler.TimelineView>
<scheduler:SchedulerTimelineView TimeRegionTemplate="{StaticResource specialRegionsTemplate}"/>
</scheduler:SfScheduler.TimelineView>
</scheduler:SfScheduler>
</Grid>
</ContentPage>
CS
Define the TimeRegionTemplate within your XAML to customize the appearance of the timeslot for non-working hours.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.Scheduler.View = SchedulerView.Week;
this.Scheduler.TimelineView.TimeRegions = this.GetTimeRegion();
this.Scheduler.DaysView.TimeRegions = this.GetTimeRegion();
}
private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
{
var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
DateTime today = DateTime.Now;
Brush background = new SolidColorBrush(Colors.LightGray.WithAlpha(0.3f));
var lunchBreak = new SchedulerTimeRegion()
{
StartTime = new DateTime(today.Year, today.Month, 1, 13, 0, 0),
EndTime = new DateTime(today.Year, today.Month, 1, 14, 0, 0),
EnablePointerInteraction = false,
RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR",
Background = Brush.Gray,
Text = "Lunch",
TextStyle = new SchedulerTextStyle
{
TextColor = Colors.White,
FontSize = 10
},
};
var breakFN = new SchedulerTimeRegion()
{
StartTime = new DateTime(today.Year, today.Month, 1, 10, 0, 0),
EndTime = new DateTime(today.Year, today.Month, 1, 10, 30, 0),
EnablePointerInteraction = false,
RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR",
Background = Brush.Gray,
Text = "Break",
TextStyle = new SchedulerTextStyle
{
TextColor = Colors.White,
FontSize = 10
},
};
var breakAN = new SchedulerTimeRegion()
{
StartTime = new DateTime(today.Year, today.Month, 1, 16, 0, 0),
EndTime = new DateTime(today.Year, today.Month, 1, 16, 30, 0),
EnablePointerInteraction = false,
RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=TU,TH",
Background = Brush.Gray,
Text = "Break",
TextStyle = new SchedulerTextStyle
{
TextColor = Colors.White,
FontSize = 10
},
};
timeRegions.Add(lunchBreak);
timeRegions.Add(breakFN);
timeRegions.Add(breakAN);
return timeRegions;
}
}
Output
|
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to customize the non-working hours timeslots in the .NET MAUI Scheduler using DataTemplate.
You can refer to our .NET MAUI Scheduler feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Scheduler documentation 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!
