Cell Selection View in .NET MAUI Scheduler (SfScheduler)

21 Jul 20266 minutes to read

The Scheduler provides the capability to customize the selection of month and timeslot cells using the CellSelectionView.

Stroke

The cell selection border color can be customized by using the Stroke property in the CellSelectionView.

<ContentPage   
    . . .
    xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">

    <scheduler:SfScheduler x:Name="Scheduler">
        <scheduler:SfScheduler.CellSelectionView>
                <scheduler:SchedulerCellSelectionView Stroke="Red"/>
        </scheduler:SfScheduler.CellSelectionView>
    </scheduler:SfScheduler>
</ContentPage>
using Syncfusion.Maui.Scheduler;

. . .
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.Scheduler.CellSelectionView.Stroke = Brush.Green;
    }
}

customize-border-color-in-cell-selection-in-maui-scheduler

Background

The cell selection background color can be customized by using the Background property in the CellSelectionView.
The default value is Brush.Transparent.

NOTE

By default, the Stroke property will have a value. If Background alone is required, set the Stroke property to Brush.Transparent.

<ContentPage   
    . . .
    xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">

    <scheduler:SfScheduler x:Name="Scheduler">
        <scheduler:SfScheduler.CellSelectionView>
                <scheduler:SchedulerCellSelectionView Background="Red" Stroke="Transparent"/>
        </scheduler:SfScheduler.CellSelectionView>
    </scheduler:SfScheduler>
</ContentPage>
using Syncfusion.Maui.Scheduler;

. . .
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.Scheduler.CellSelectionView.Background = Brush.Green;
    }
}

customize-background-color-in-cell-selection-in-maui-scheduler

Corner Radius

The corner radius of cell selection view can be customized by using the CornerRadius property in the CellSelectionView.

<ContentPage   
    . . .
    xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">

    <scheduler:SfScheduler x:Name="Scheduler">
        <scheduler:SfScheduler.CellSelectionView>
                <scheduler:SchedulerCellSelectionView  Background="Red" CornerRadius="2"/>
        </scheduler:SfScheduler.CellSelectionView>
    </scheduler:SfScheduler>
</ContentPage>
using Syncfusion.Maui.Scheduler;

. . .
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.Scheduler.CellSelectionView.Stroke = Brush.Green;
        this.Scheduler.CellSelectionView.CornerRadius = 2;
    }
}

customize-corner-radius-in-cell-selection-in-maui-scheduler

Stroke Thickness

The thickness of the selection view Stroke can be customized by using the StrokeWidth property in the CellSelectionView.

NOTE

The StrokeWidth is only applicable for the Stroke property.

<ContentPage   
    . . .
    xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">

    <scheduler:SfScheduler x:Name="Scheduler">
        <scheduler:SfScheduler.CellSelectionView>
                <scheduler:SchedulerCellSelectionView  Stroke="Red" StrokeWidth="2"/>
        </scheduler:SfScheduler.CellSelectionView>
    </scheduler:SfScheduler>
</ContentPage>
using Syncfusion.Maui.Scheduler;

. . .
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.Scheduler.CellSelectionView.Stroke = Brush.Green;
        this.Scheduler.CellSelectionView.StrokeWidth = 2;
    }
}

customize-stroke-thickness-in-cell-selection-in-maui-scheduler

Template

The scheduler allows you to use the custom view as a selection view by using the Template property in the CellSelectionView.

<ContentPage   
    . . .
    xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">

    <scheduler:SfScheduler x:Name="Scheduler">
        <scheduler:SfScheduler.CellSelectionView>
            <scheduler:SchedulerCellSelectionView>
                <scheduler:SchedulerCellSelectionView.Template>
                    <DataTemplate>
                        <Button BackgroundColor = "#FF9800"
                                Text="+ Add event"
                                TextColor="White"/>
                    </DataTemplate>
                </scheduler:SchedulerCellSelectionView.Template>
            </scheduler:SchedulerCellSelectionView>
        </scheduler:SfScheduler.CellSelectionView>
    </scheduler:SfScheduler>
</ContentPage>

customize-template-in-cell-selection-in-maui-scheduler