Working with .NET MAUI AI-Powered Scheduler (SfSmartScheduler)

21 Jul 202624 minutes to read

Assist Button

The assist button interaction and the default appearance of assist button can be customized by setting the EnableAssistButton and AssistButtonTemplate properties of SfSmartScheduler control.

Enable assist button

The assist button interaction can be enabled or disabled by setting the EnableAssistButton property of the SfSmartScheduler control. By default, the EnableAssistButton property is set to true.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler x:Name="smartScheduler" 
                                     EnableAssistButton="False"/>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.EnableAssistButton = false;
this.Content = smartScheduler;

Customize assist button appearance using DataTemplate

The assist button appearance can be customized by using the AssistButtonTemplate property of SfSmartScheduler control.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler x:Name="Scheduler">
        <smartScheduler:SfSmartScheduler.AssistButtonTemplate>
            <DataTemplate>
                <Grid BackgroundColor="#6750A4">
                    <Label Text="AI"
                        FontAttributes="Bold"
                        TextColor="#FFFFFF"
                        VerticalOptions="Center"
                        HorizontalOptions="Center" />
                </Grid>
            </DataTemplate>
        </smartScheduler:SfSmartScheduler.AssistButtonTemplate>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistButtonTemplate = new DataTemplate(() =>
{
    var grid = new Grid
    {
        BackgroundColor = Color.FromArgb("#6750A4")
    };

    var label = new Label
    {
        Text = "AI",
        FontAttributes = FontAttributes.Bold,
        TextColor = Color.FromArgb("#FFFFFF"),
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Center
    };

    grid.Add(label);
    return grid;
});
this.Content = smartScheduler;

Assist button template in .NET MAUI AI-Powered Scheduler.

Assist View

The default appearance of the assist view can be customized by setting the AssistViewHeight, AssistViewWidth, AssistViewHeaderText, Placeholder, Prompt, SuggestedPrompts and ShowAssistViewBanner properties of SfSmartScheduler control.

Assist view height

The assist view height can be customized by using the AssistViewHeight property of the AssistViewSettings.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler  x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings AssistViewHeight="420"/>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistViewSettings.AssistViewHeight = 420;
this.Content = smartScheduler;

Assist view height in .NET MAUI AI-Powered Scheduler.

Assist view width

The assist view width can be customized by using the AssistViewWidth property of the AssistViewSettings.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler  x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings AssistViewWidth="500"/>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistViewSettings.AssistViewWidth = 500;
this.Content = smartScheduler;

Assist view width in .NET MAUI AI-Powered Scheduler.

Assist view header text

The assist view header text can be customized by using the AssistViewHeaderText property of the AssistViewSettings.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler  x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings AssistViewHeaderText="Smart Scheduler"/>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistViewSettings.AssistViewHeaderText = "Smart Scheduler";
this.Content = smartScheduler;

Assist view header text in .NET MAUI AI-Powered Scheduler.

Placeholder

The assist view placeholder text can be customized by using the Placeholder property of the AssistViewSettings.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler  x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings Placeholder="Enter your message..."/>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistViewSettings.Placeholder = "Enter your message...";
this.Content = smartScheduler;

Assist view placeholder in .NET MAUI AI-Powered Scheduler.

Prompt

The assist view prompt text can be customized by using the Prompt property of the AssistViewSettings. By default, the Prompt property is set to empty.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler  x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings Prompt="Find 30-minute slots this week"/>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistViewSettings.Prompt = "Find 30-minute slots this week";
this.Content = smartScheduler;

Assist view prompt in .NET MAUI AI-Powered Scheduler.

Suggested Prompts

The assist view suggested prompts can be customized by using the SuggestedPrompts property of the AssistViewSettings. By default, the SuggestedPrompts property is set to null.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>

    <smartScheduler:SfSmartScheduler x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings >
            <smartScheduler:SchedulerAssistViewSettings SuggestedPrompts="{Binding SuggestedPrompts}"/>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
 SfSmartScheduler smartScheduler = new SfSmartScheduler();
 smartScheduler.AssistViewSettings.ShowAssistViewBanner = true;
 smartScheduler.AssistViewSettings.SuggestedPrompts = new List<string>
 {
    "Summarize today's appointments",
    "Find today's free timeslots",
    "Conflict detection"
 };
 this.Content = smartScheduler;
public class ViewModel
{
    private List<string> suggestedPrompts;
    
    public List<string> SuggestedPrompts
    {
        get { return suggestedPrompts; }
        set { suggestedPrompts = value; }
    }

    public ViewModel()
    {
        this.suggestedPrompts = new List<string>()
        {
            "Summarize today's appointments",
            "Find today's free timeslots",
            "Conflict detection"
        };
    }
}

Assist view suggested prompts in .NET MAUI AI-Powered Scheduler.

Show Assist View Banner

The assist view banner is a promotional message displayed when the assist view opens. Control its visibility using the ShowAssistViewBanner property of the AssistViewSettings. By default, this property is set to false.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler  x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings ShowAssistViewBanner="True"/>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
this.smartScheduler = new SfSmartScheduler();
this.smartScheduler.AssistViewSettings.ShowAssistViewBanner = true;
this.Content = smartScheduler;

Template Customization

The SfSmartScheduler facilitates the customization of both header and banner templates according to specific requirements. This feature enhances flexibility and provides a higher degree of control over the display of assist view.

Customize assist view header appearance using DataTemplate

The assist view header appearance can be customized by using the AssistViewHeaderTemplate property of the AssistViewSettings.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings>
                <smartScheduler:SchedulerAssistViewSettings.AssistViewHeaderTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="LightYellow"
                            ColumnDefinitions="40,*,40,40">
                            <Label Text="✦"
                                FontSize="20"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                Grid.Column="0" />
                            <Label Text="Smart Scheduler"
                                FontAttributes="Bold"
                                FontSize="16"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Start"
                                Grid.Column="1" />
                            <Label Text="⟳"
                                FontSize="20"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                Grid.Column="2" />
                            <Label Text="✕"
                                FontSize="20"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                Grid.Column="3" />
                        </Grid>
                    </DataTemplate>
                </smartScheduler:SchedulerAssistViewSettings.AssistViewHeaderTemplate>
            </smartScheduler:SchedulerAssistViewSettings>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistViewSettings = new SchedulerAssistViewSettings();
smartScheduler.AssistViewSettings.AssistViewHeaderTemplate = new DataTemplate(() =>
{
    var grid = new Grid
    {
        BackgroundColor = Colors.LightYellow,
        ColumnDefinitions =
        {
            new ColumnDefinition { Width = 40 },
            new ColumnDefinition { Width = GridLength.Star },
            new ColumnDefinition { Width = 40 },
            new ColumnDefinition { Width = 40 }
        }
    };

    var symbol = new Label
    {
        Text = "✦",
        FontSize = 20,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Center
    };
    grid.Children.Add(symbol);
    Grid.SetColumn(symbol, 0);

    var title = new Label
    {
        Text = "Smart Scheduler",
        FontAttributes = FontAttributes.Bold,
        FontSize = 16,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Start
    };
    grid.Children.Add(title);
    Grid.SetColumn(title, 1);

    var reset = new Label
    {
        Text = "⟳",
        FontSize = 20,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Center
    };
    grid.Children.Add(reset);
    Grid.SetColumn(reset, 2);

    var close = new Label
    {
        Text = "✕",
        FontSize = 20,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Center
    };
    grid.Children.Add(close);
    Grid.SetColumn(close, 3);

    return grid;
});
this.Content = smartScheduler;

Assist view header template in .NET MAUI AI-Powered Scheduler.

Customize assist view banner appearance using DataTemplate

The assist view banner appearance can be customized by using the AssistViewBannerTemplate property of the AssistViewSettings.

<ContentPage   
    . . .
    xmlns:smartScheduler="clr-namespace:Syncfusion.Maui.SmartScheduler;assembly=Syncfusion.Maui.SmartScheduler">
    <smartScheduler:SfSmartScheduler x:Name="smartScheduler">
        <smartScheduler:SfSmartScheduler.AssistViewSettings>
            <smartScheduler:SchedulerAssistViewSettings ShowAssistViewBanner="True">
                <smartScheduler:SchedulerAssistViewSettings.AssistViewBannerTemplate>
                    <DataTemplate>
                        <Grid Padding="16"
                            Margin="0,40,0,0"
                            BackgroundColor="#E9EEFF"
                            HorizontalOptions="Center"
                            VerticalOptions="Start">
                            <Label Text="Hi ! I’m your personalized assistant.&#10;How can I help you ?"
                                    HorizontalTextAlignment="Center"
                                    VerticalTextAlignment="Center"
                                    TextColor="#1C1B1F"
                                    FontSize="16"
                                    Padding="10" />
                        </Grid>
                    </DataTemplate>
                </smartScheduler:SchedulerAssistViewSettings.AssistViewBannerTemplate>
            </smartScheduler:SchedulerAssistViewSettings>
        </smartScheduler:SfSmartScheduler.AssistViewSettings>
    </smartScheduler:SfSmartScheduler>
</ContentPage>
using Syncfusion.Maui.SmartScheduler;

. . .
SfSmartScheduler smartScheduler = new SfSmartScheduler();
smartScheduler.AssistViewSettings = new SchedulerAssistViewSettings();
smartScheduler.AssistViewSettings.ShowAssistViewBanner = true;
smartScheduler.AssistViewSettings.AssistViewBannerTemplate = new DataTemplate(() =>
{
    var grid = new Grid
    {
        Padding = new Thickness(16),
        Margin = new Thickness(0, 40, 0, 0),
        BackgroundColor = Color.FromArgb("#E9EEFF"),
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Start
    };

    var label = new Label
    {
        Text = "Hi! I’m your personalized assistant.\nHow can I help you?",
        HorizontalTextAlignment = TextAlignment.Center,
        VerticalTextAlignment = TextAlignment.Center,
        TextColor = Color.FromArgb("#1C1B1F"),
        FontSize = 16,
        Padding = new Thickness(10),
        FontAttributes = FontAttributes.None
    };
    
    grid.Children.Add(label);
    return grid;
});
this.Content = smartScheduler;

Assist view banner template in .NET MAUI AI-Powered Scheduler.