How to highlight the working and non working hours in .NET MAUI Scheduler (SfScheduler) days view and timeline view?

2 mins read

In MAUI Scheduler, you can highlight the timeslots of working and non-working hours using the TimeRegions property of the DaysView and TimelineView in scheduler. By using the EnablePointerInteraction value you can enable or disable the touch interaction. By default the value of EnablePointerInteraction is true.

XAML

Initialize the scheduler with required properties.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WorkHour.MainPage"
             xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
 
    <Grid>
        <scheduler:SfScheduler x:Name="Scheduler"    AllowedViews="Day,Week,WorkWeek,TimelineDay,TimelineWeek,TimelineWorkWeek"/>
    </Grid>
</ContentPage>

Add the required time regions for highlighting the working and non-working hour with the help of below method.

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 nonWorkingRegion1 = new SchedulerTimeRegion()
        {
            StartTime = new DateTime(today.Year, today.Month, 1, 00, 0, 0),
            EndTime = new DateTime(today.Year, today.Month, 1, 9, 0, 0),
            EnablePointerInteraction = false,
            RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR",
            Background = background,
        };
 
        var nonWorkingRegion2 = new SchedulerTimeRegion()
        {
            StartTime = new DateTime(today.Year, today.Month, 1, 18, 0, 0),
            EndTime = new DateTime(today.Year, today.Month, 1, 23, 59, 0),
            EnablePointerInteraction = false,
            RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR",
            Background = background,
        };
 
        var workingRegion = new SchedulerTimeRegion()
        {
            StartTime = new DateTime(today.Year, today.Month, 1, 9, 0, 0),
            EndTime = new DateTime(today.Year, today.Month, 1, 18, 0, 0),
            EnablePointerInteraction = true,
            RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR",
            Background = new SolidColorBrush(Colors.LightBlue.WithAlpha(0.3f))
        };
 
        var nonWorkingDays = new SchedulerTimeRegion()
        {
            StartTime = new DateTime(today.Year, today.Month, 1, 0, 0, 0),
            EndTime = new DateTime(today.Year, today.Month, 1, 23, 59, 0),
            EnablePointerInteraction = false,
            Background = background,
            RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=SU,SA",
        };
 
        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(nonWorkingRegion1);
        timeRegions.Add(nonWorkingRegion2);
        timeRegions.Add(workingRegion);
        timeRegions.Add(nonWorkingDays);
        timeRegions.Add(lunchBreak);
        timeRegions.Add(breakFN);
        timeRegions.Add(breakAN);
 
        return timeRegions;
    }
}

MAUI Scheduler time slots customization using time regions.

Did you find this information helpful?

Yes

Comments (0)

How to highlight the working and non working hours in .NET MAUI Scheduler (SfScheduler) days view and timeline view?

Access denied