Date Navigation and Restriction in .NET MAUI Scheduler

19 Sep 202410 minutes to read

Date navigation

The .NET MAUI Scheduler control allows to navigate through dates either programmatically or by using the forward and backward buttons, and it is applicable to all the Scheduler views.

NOTE

Touch gesture is not working, as framework is facing an issue

Programmatic date navigation

The DisplayDate property of SfScheduler programmatically navigates the dates in scheduler.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Week">
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Week;
scheduler.DisplayDate = DateTime.Today.AddMonths(-1).AddHours(9);
this.Content = scheduler;

NOTE

When navigating before a minimum date, the date will be reset to the scheduler minimum date, and when navigating beyond a maximum date, the date will be reset to the scheduler maximum date.

Programmatic date selection

You can programmatically select the dates in scheduler by using the SelectedDate property of SfScheduler.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Week">
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.View = SchedulerView.Week;
scheduler.SelectedDate = DateTime.Today.AddHours(9);
this.Content = scheduler;

NOTE

It is not possible to use the SelectedDate to select before minimum display date time and beyond maximum display date time.

Programmatically change to adjacent dates

The next and previous views can be accessed through swiping the control from right to left and left to right. With SfScheduler, the view can be changed programmatically as well.

Forward

The SfScheduler allows to view the next immediate date using the Forward method. If the scheduler view is month, it moves on to the next month, similarly for week and day views it moves on to the next day.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <scheduler:SfScheduler x:Name="Scheduler" 
                           View="Week" >
    </scheduler:SfScheduler>
    <Button x:Name="button" Text="Forward" Clicked="OnButtonClicked" GridLayout.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</Grid>
this.button.Clicked += OnButtonClicked;

private void OnButtonClicked(object sender, EventArgs e)
{
    this.Scheduler.Forward();
}

Backward

The SfScheduler allows to view the previous immediate date using the Backward method. If the scheduler view is month, it moves on to the previous month, similarly for week and day views it moves on to the previous day.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <scheduler:SfScheduler x:Name="Scheduler" 
                           View="Week" >
    </scheduler:SfScheduler>
    <Button x:Name="button" Text="Backward" Clicked="OnButtonClicked" GridLayout.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</Grid>
this.button.Clicked += OnButtonClicked;

private void OnButtonClicked(object sender, EventArgs e)
{
    this.Scheduler.Backward();
}

Allow view navigation

By using the AllowViewNavigation property of the SfScheduler, you can quickly navigate to the respective day or timeline day view by tapping on the month cell or view header of the following scheduler views: week, work week, month, agenda, timeline week, timeline work week, and timeline month views.

<scheduler:SfScheduler x:Name="Scheduler" 
                        AllowViewNavigation="True">
 </scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.AllowViewNavigation = true;
this.Content = scheduler;

Allow view navigation in .NET MAUI Scheduler.

NOTE

  • The default value of AllowViewNavigation is false.
  • The AllowViewNavigation is not applicable for the day and timeline day views.

Show date picker

You can enable the date picker for the scheduler by using the ShowDatePickerButton property in the SfScheduler, which displays the date picker in the header view. It allows you to quickly switch between, months, years, decades or century where you can directly jump to a specific date by selecting it from a date picker.

<scheduler:SfScheduler x:Name="Scheduler" 
                       ShowDatePickerButton="True">
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.ShowDatePickerButton = true;
this.Content = scheduler;

Date picker in Scheduler

Allowed views

The SfScheduler allows to quickly switch between the different scheduler views using the AllowedViews property. These views will display as a button in the scheduler header.
There will be more icons available for all platforms as this UI will be responsive.

The default value of AllowedViews property is SchedulerViews.Default.

<scheduler:SfScheduler x:Name="Scheduler" 
                       AllowedViews="Day,Week,WorkWeek,Month,TimelineDay,TimelineWeek,TimelineWorkWeek,TimelineMonth" >
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.AllowedViews = SchedulerViews.Day | SchedulerViews.Week | SchedulerViews.WorkWeek | SchedulerViews.Month | SchedulerViews.TimelineDay | SchedulerViews.TimelineWeek | SchedulerViews.TimelineWorkWeek | SchedulerViews.TimelineMonth;
this.Content = scheduler;

Date restriction

In .NET MAUI Scheduler, you can restrict the available dates to a range of dates using the properties MinimumDateTime, MaximumDateTime and SelectableDayPredicate. It is applicable to all the Scheduler views.

Change minimum display date and time

The minimum date time will restrict backward navigation of date selections as well as the ability to swipe the views beyond the minimum date range. Any dates that appear before the minimum date will be disabled. The default value of MinimumDateTime is DateTime.MinValue.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Week">
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.MinimumDateTime = DateTime.Today.AddMonths(-3).AddHours(9);
this.Content = scheduler;

Change maximum display date and time

The maximum date time will restrict forward navigation of date selections as well as the ability to swipe the views beyond the maximum date range. Any dates that appear after the maximum date will be disabled. The default value of MaximumDateTime is DateTime.MaxValue .

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Week">
</scheduler:SfScheduler>
SfScheduler scheduler = new SfScheduler();
scheduler.MaximumDateTime = DateTime.Today.AddMonths(3).AddHours(12);
this.Content = scheduler;

Selectable day predicate (Blackout dates)

The SelectableDayPredicate functions allows certain days for selection. Only the days that SelectableDayPredicate returns true will be selectable in the Scheduler.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Week">
</scheduler:SfScheduler>
this.Scheduler.SelectableDayPredicate = (date) =>
{
    if (date.DayOfWeek == DayOfWeek.Sunday || date.DayOfWeek == DayOfWeek.Saturday)
    {
        return false;
    }

    return true;
};

Customizing the disabled date and time appearance

You can customize the background color and text style for the minimum date time, maximum date time, and selectable day predicate, by setting the DisabledDateBackground, and DisabledDateTextStyle properties of SfScheduler.

<scheduler:SfScheduler x:Name="Scheduler" 
                       View="Week">
</scheduler:SfScheduler>
var disabledDateTextStyle = new SchedulerTextStyle()
{
    TextColor = Colors.Red,
    FontSize = 12,
};

this.Scheduler.DisabledDateTextStyle = disabledDateTextStyle;
this.Scheduler.DisabledDateBackground = Brush.LightSkyBlue;

NOTE

  • The DisabledDateTextStyle and DisabledDateBackground properties will be applicable for the following properties such as MinimumDateTime, MaximumDateTime, and SelectableDayPredicate of the SfScheduler.
  • The DisabledDateBackground property is not applicable for month cells and view header cells.