How to customize the non-working hour's timeslot using the DataTemplateSelector in the .NET MAUI Scheduler (SfScheduler) days view and timeline views?
In the .NET MAUI Scheduler, you can highlight the timeslots of working and non-working hours across various views such as day, week, workweek, timeline day, timeline week, and timeline workweek using the TimeRegions property of the DaysView and TimelineView. You can customize the appearance of TimeRegions using the TimeRegionTemplate property and choose different DataTemplates through the DataTemplateSelector.
The BindingContext of the TimeRegionTemplate is the SchedulerTimeRegion. You can use the binding context SchedulerTimeRegion properties in the data template based on your requirement.
CS
Define a TimeRegionTemplateSelector class to provide different DataTemplate based on the requirement and assign them to the TimeRegionTemplate of day and timeline views.
public class TimeRegionTemplateSelector : DataTemplateSelector
{
public TimeRegionTemplateSelector()
{
}
public DataTemplate TimeRegionsTemplate { get; set; }
public DataTemplate TimeRegionsTemplate1 { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var timeRegionDetails = item as SchedulerTimeRegion;
if (timeRegionDetails.EnablePointerInteraction)
return TimeRegionsTemplate;
return TimeRegionsTemplate1;
}
}
CS
Configure TimeRegions in your application based on the requirements.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.Scheduler.TimelineView.TimeRegions = this.GetTimeRegion();
this.Scheduler.DaysView.TimeRegions = this.GetTimeRegion();
}
private ObservableCollection<SchedulerTimeRegion> GetTimeRegion()
{
var timeRegions = new ObservableCollection<SchedulerTimeRegion>();
var recurrenceExceptionDates = DateTime.Now.Date.AddDays(3);
var timeRegion = new SchedulerTimeRegion()
{
StartTime = DateTime.Today.Date.AddHours(13),
EndTime = DateTime.Today.Date.AddHours(14),
Text = "Lunch",
EnablePointerInteraction = false,
RecurrenceRule = "FREQ=DAILY;INTERVAL=1",
};
var BreakTimeRegion = new SchedulerTimeRegion()
{
StartTime = DateTime.Today.Date.AddHours(11),
EndTime = DateTime.Today.Date.AddHours(11).AddMinutes(30),
Text = "Break",
EnablePointerInteraction = true,
RecurrenceRule = "FREQ=DAILY;INTERVAL=1",
};
timeRegions.Add(timeRegion);
timeRegions.Add(BreakTimeRegion);
return timeRegions;
}
}
XAML
The TimeRegionTemplate selects the DataTemplate based on the EnablePointerInteraction value.
<Grid>
<Grid.Resources>
<DataTemplate x:Key="timeRegiontemplate">
<Grid Background = "LightCyan" Opacity="0.5">
<Label x:Name="label" HorizontalOptions="Center" TextColor="Red" Text="{Binding Text}" VerticalOptions="Center" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="timeRegiontemplate1">
<Grid Background = "Lightgreen" Opacity="0.5">
<Label x:Name="label" HorizontalOptions="Center" TextColor="Orange" Text="{Binding Text}" VerticalOptions="Center" />
</Grid>
</DataTemplate>
<local:TimeRegionTemplateSelector x:Key="timeRegionTemplateSelector" TimeRegionsTemplate="{StaticResource timeRegiontemplate}" TimeRegionsTemplate1="{StaticResource timeRegiontemplate1}" />
</Grid.Resources>
<scheduler:SfScheduler x:Name="Scheduler" AllowedViews="Day,Week,WorkWeek,TimelineDay,TimelineWeek,TimelineWorkWeek"
View="TimelineWeek">
<scheduler:SfScheduler.TimelineView>
<scheduler:SchedulerTimelineView TimeRegionTemplate = "{StaticResource timeRegionTemplateSelector}"/>
</scheduler:SfScheduler.TimelineView>
<scheduler:SfScheduler.DaysView>
<scheduler:SchedulerDaysView TimeRegionTemplate = "{StaticResource timeRegionTemplateSelector}"/>
</scheduler:SfScheduler.DaysView>
</scheduler:SfScheduler>
</Grid>
Output
|
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to customize the non-working hour's timeslot using the DataTemplateSelector in the .NET MAUI Scheduler (SfScheduler) days view and timeline views.
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 Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our 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!
