Merge pull request #3832 from syncfusion-content/997029-Scheduler-UG

997029 : Updated UG for new features in maui scheduler

Author: saiganesh-sakthivel

MAUI/Scheduler/images/month-view/appointment-indicator-stroke-thickness-maui-scheduler.png

@@ -109,6 +109,62 @@ this.Scheduler.MonthView.AppointmentIndicatorSize = 10;
 
 ![change-appointment-indicator-size-in-maui-scheduler](images/month-view/appointment-indicator-size-maui-scheduler.png){:width="325" height="600" loading="lazy" .lazy .shadow-effect .section-padding .img-padding}
 
+## Appointment indicator renderer mode
+
+The scheduler month view allows you to customize the appointment indicator rendering mode by using the `AppointmentIndicatorRenderMode` property of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). The `AppointmentIndicatorRenderMode` property supports three different types: `Fill`, `Stroke` and `FillAndStroke`. By default, the `AppointmentIndicatorRenderMode` is set to Fill.
+
+{% tabs %}  
+{% highlight XAML hl_lines="5" %}
+
+<schedule:SfScheduler x:Name="Scheduler"
+                        View="Month" >
+        <schedule:SfScheduler.MonthView>
+            <schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" AppointmentIndicatorSize="15" AppointmentIndicatorCount="2" AppointmentIndicatorRenderMode="Stroke"/>
+        </schedule:SfScheduler.MonthView>
+</schedule:SfScheduler>
+
+{% endhighlight %}
+{% highlight C# hl_lines="4" %}
+
+this.Scheduler.View = SchedulerView.Month;
+this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
+this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.Stroke;
+this.Scheduler.MonthView.AppointmentIndicatorSize = 15;
+this.Scheduler.MonthView.AppointmentIndicatorCount = 2;
+
+{% endhighlight %}  
+{% endtabs %}
+
+![appointment-renderer-mode-stroke-maui-scheduler](images/month-view/appointment-renderer-mode-stroke-maui-scheduler.png){:width="325" height="600" loading="lazy" .lazy .shadow-effect .section-padding .img-padding}
+
+## Appointment indicator stroke thickness
+
+The scheduler month view allows you to customize the appointment indicator stroke thickness by using the `AppointmentIndicatorStrokeThickness` property of the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). By default, the `AppointmentIndicatorStrokeThickness` is set to 1d.
+
+{% tabs %}  
+{% highlight XAML hl_lines="5" %}
+
+<schedule:SfScheduler x:Name="Scheduler"
+                        View="Month" >
+        <schedule:SfScheduler.MonthView>
+            <schedule:SchedulerMonthView AppointmentDisplayMode="Indicator" AppointmentIndicatorSize="20" AppointmentIndicatorRenderMode="Stroke" AppointmentIndicatorStrokeThickness="4"/>
+        </schedule:SfScheduler.MonthView>
+</schedule:SfScheduler>
+
+{% endhighlight %}
+{% highlight C# hl_lines="6" %}
+
+this.Scheduler.View = SchedulerView.Month;
+this.Scheduler.MonthView.AppointmentDisplayMode = SchedulerMonthAppointmentDisplayMode.Indicator;
+this.Scheduler.MonthView.AppointmentIndicatorRenderMode = AppointmentIndicatorRenderMode.Stroke;
+this.Scheduler.MonthView.AppointmentIndicatorSize = 20;
+this.Scheduler.MonthView.AppointmentIndicatorStrokeThickness = 4;
+
+{% endhighlight %}  
+{% endtabs %}
+
+![appointment-indicator-stroke-thickness-maui-scheduler](images/month-view/appointment-indicator-stroke-thickness-maui-scheduler.png){:width="325" height="600" loading="lazy" .lazy .shadow-effect .section-padding .img-padding}
+
 ## Hide leading and trailing dates
 
 The previous and next month dates from a Scheduler month view can be hidden by using the [ShowLeadingAndTrailingDates](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html#Syncfusion_Maui_Scheduler_SchedulerMonthView_ShowLeadingAndTrailingDates) property in the [MonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html). The `ShowLeadingAndTrailingDates` property defaults to `true.`

MAUI/Scheduler/images/month-view/appointment-renderer-mode-stroke-maui-scheduler.png

@@ -114,7 +114,7 @@ this.Scheduler.AppointmentsSource = appointment;
 
 ![Resource sharing in .NET MAUI Scheduler.](images/resource-view/resource-view-sharing-in-net-maui-scheduler.png)
 
-## Resource Grouping in Days View
+## Resource Grouping in Days View - Desktop
 
 In the day, week, and work week views, you can control whether dates are grouped under resources or resources are grouped under dates by using the [`ResourceGroupType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_ResourceGroupType) property of the [`SchedulerResourceView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_Resources) class.
 
@@ -172,6 +172,264 @@ this.Scheduler.ResourceView.ResourceGroupType = SchedulerResourceGroupType.Date;
 
 ![Resource Grouping By Date in Days View in .NET MAUI Scheduler.](images/resource-view/group-resources-by-date-in-days-view-in-net-maui-scheduler.png)
 
+## Resource Grouping in Days View - Mobile
+
+In Mobile platforms, the resource view for the day, week, and work week view where grouped under an adaptive header.
+
+N> The adaptive header display of resources in the **Day**, **Week**, and **Work Week** views is supported only on .NET MAUI mobile platforms (**Android** and **iOS**).
+
+### Customize hamburger icon color
+
+The hamburger icon color can be customized by using the `HamburgerIconColor` property of the [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6).
+
+{% tabs %}
+{% highlight XAML hl_lines="4" %}
+
+ <syncfusion:SfScheduler x:Name="Scheduler" View="Day">
+     <syncfusion:SfScheduler.ResourceView>
+         <syncfusion:SchedulerResourceView HamburgerIconColor="Red" />
+     </syncfusion:SfScheduler.ResourceView>
+ </syncfusion:SfScheduler>
+
+{% endhighlight %}
+{% highlight C# hl_lines="9" %}
+var Resources = new ObservableCollection<SchedulerResource>()
+{
+   new SchedulerResource() { Name = "Sophia", Id = "1000" },
+   new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
+   new SchedulerResource() { Name = "James William", Id = "1002" },
+};
+
+this.Scheduler.ResourceView.Resources = Resources;
+this.Scheduler.ResourceView.HamburgerIconColor = Colors.Red;
+
+{% endhighlight %}
+{% endtabs %}
+
+![customize-hamburger-icon-color-in-maui-scheduler](images/resource-view/customize-hamburger-icon-color-in-maui-scheduler.png)
+
+### Customize drawer resource selection color
+
+The drawer resource selection color can be customized by using the `DrawerResourceSelectionColor` property of the [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6).
+
+{% tabs %}
+{% highlight XAML hl_lines="4" %}
+
+ <syncfusion:SfScheduler x:Name="Scheduler" View="Day">
+     <syncfusion:SfScheduler.ResourceView>
+         <syncfusion:SchedulerResourceView DrawerResourceSelectionColor="DodgerBlue" />
+     </syncfusion:SfScheduler.ResourceView>
+ </syncfusion:SfScheduler>
+
+{% endhighlight %}
+{% highlight C# hl_lines="9" %}
+var Resources = new ObservableCollection<SchedulerResource>()
+{
+   new SchedulerResource() { Name = "Sophia", Id = "1000" },
+   new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
+   new SchedulerResource() { Name = "James William", Id = "1002" },
+};
+
+this.Scheduler.ResourceView.Resources = Resources;
+this.Scheduler.ResourceView.DrawerResourceSelectionColor = Brush.DodgerBlue;
+
+{% endhighlight %}
+{% endtabs %}
+
+![customize-drawer-resource-selection-color-in-maui-scheduler](images/resource-view/customize-drawer-resource-selection-color-in-maui-scheduler.png)
+
+### Customize drawer background
+
+The drawer background can be customized by using the `DrawerBackground` property of the [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6).
+
+{% tabs %}
+{% highlight XAML hl_lines="4" %}
+
+ <syncfusion:SfScheduler x:Name="Scheduler" View="Day">
+     <syncfusion:SfScheduler.ResourceView>
+         <syncfusion:SchedulerResourceView DrawerBackground="LightGoldenrodYellow" />
+     </syncfusion:SfScheduler.ResourceView>
+ </syncfusion:SfScheduler>
+
+{% endhighlight %}
+{% highlight C# hl_lines="9" %}
+var Resources = new ObservableCollection<SchedulerResource>()
+{
+   new SchedulerResource() { Name = "Sophia", Id = "1000" },
+   new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
+   new SchedulerResource() { Name = "James William", Id = "1002" },
+};
+
+this.Scheduler.ResourceView.Resources = Resources;
+this.Scheduler.ResourceView.DrawerBackground = Brush.LightGoldenrodYellow;
+
+{% endhighlight %}
+{% endtabs %}
+
+![customize-drawer-background-in-maui-scheduler](images/resource-view/customize-drawer-background-in-maui-scheduler.png)
+
+### Customize adaptive header appearance using DataTemplate
+
+The adaptive header appearance customization can be achieved by using the `AdaptiveHeaderTemplate` property of [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6) in the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html).
+
+{% tabs %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
+
+<schedule:SfScheduler x:Name="Scheduler" View="Day">
+    <schedule:SfScheduler.ResourceView>
+        <schedule:SchedulerResourceView>
+            <schedule:SchedulerResourceView.AdaptiveHeaderTemplate>
+                <DataTemplate>
+                    <Grid Padding="8" BackgroundColor="PaleGreen">
+                        <HorizontalStackLayout Spacing="8" VerticalOptions="Center">
+                            <Label Text="☰"
+                                    FontSize="16"
+                                    VerticalTextAlignment="Center"
+                                    HorizontalTextAlignment="Center"
+                                    TextColor="Red"
+                                    Margin="0,0,12,0">
+                                <Label.GestureRecognizers>
+                                    <TapGestureRecognizer Tapped="OnTapped" />
+                                </Label.GestureRecognizers>
+                            </Label>
+                            <Label Text="{Binding Resource.Name}"
+                                    FontAttributes="Bold"
+                                    FontSize="14" 
+                                    TextColor="DarkViolet" />
+                        </HorizontalStackLayout>
+                    </Grid>
+                </DataTemplate>
+            </schedule:SchedulerResourceView.AdaptiveHeaderTemplate>
+        </schedule:SchedulerResourceView>
+    </schedule:SfScheduler.ResourceView>
+</schedule:SfScheduler>
+
+{% endhighlight %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
+
+var Resources = new ObservableCollection<SchedulerResource>()
+{
+   new SchedulerResource() { Name = "Sophia", Id = "1000" },
+   new SchedulerResource() { Name = "Zoey Addison", Id = "1001" },
+   new SchedulerResource() { Name = "James William", Id = "1002" },
+};
+
+this.Scheduler.ResourceView.Resources = Resources;
+this.Scheduler.ResourceView.AdaptiveHeaderTemplate = new DataTemplate(() =>
+{
+    var grid = new Grid
+    {
+        Padding = 8,
+        BackgroundColor = Colors.PaleGreen
+    };
+
+    var stack = new HorizontalStackLayout
+    {
+        Spacing = 8,
+        VerticalOptions = LayoutOptions.Center
+    };
+
+    var menuLabel = new Label
+    {
+        Text = "☰",
+        FontSize = 16,
+        TextColor = Colors.Red,
+        VerticalTextAlignment = TextAlignment.Center,
+        HorizontalTextAlignment = TextAlignment.Center,
+        Margin = new Thickness(0, 0, 12, 0)
+    };
+
+    var tap = new TapGestureRecognizer();
+    tap.Tapped += OnTapped;
+    menuLabel.GestureRecognizers.Add(tap);
+    var nameLabel = new Label
+    {
+        FontAttributes = FontAttributes.Bold,
+        FontSize = 14,
+        TextColor = Colors.DarkViolet
+    };
+    
+    nameLabel.SetBinding(Label.TextProperty, "Resource.Name");
+    stack.Add(menuLabel);
+    stack.Add(nameLabel);
+    grid.Add(stack);
+    return grid;
+});
+
+private void OnTapped(object sender, TappedEventArgs e)
+{
+    if (sender is Label label && label.BindingContext is SchedulerAdaptiveResource resource)
+    {
+        resource.ToggleResourceDrawerView();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![customize-adapter-header-template-in-maui-scheduler](images/resource-view/customize-adapter-header-template-in-maui-scheduler.png)
+
+N> 
+
+* The BindingContext of the `AdaptiveHeaderTemplate` is the `SchedulerAdaptiveResource.`
+* The `ToggleResourceDrawerView` method should be called on the `SchedulerAdaptiveResource` instance obtained from the control’s BindingContext. It toggles the visibility of the drawer resource view. It is used only when the `AdaptiveHeaderTemplate` is applied.
+
+### Customize drawer resource appearance using DataTemplate
+
+The drawer resource appearance customization can be achieved by using the `DrawerResourceTemplate` property of [SchedulerResourceView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html?tabs=tabid-13%2Ctabid-6) in the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html).
+
+{% tabs %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
+
+<ContentPage.Resources>
+    <DataTemplate x:Key="drawerResourceTemplate">
+        <Grid Background="{Binding DataItem.BackgroundBrush}">
+            <Label Margin="10" FontAttributes="Bold"  Text="{Binding DataItem.Name}" TextColor="{Binding DataItem.ForegroundBrush}"/>
+        </Grid>
+    </DataTemplate>
+</ContentPage.Resources>
+
+<scheduler:SfScheduler x:Name="scheduler">
+    <scheduler:SfScheduler.ResourceView>
+        <scheduler:SchedulerResourceView DrawerResourceTemplate="{StaticResource drawerResourceTemplate}">
+            <scheduler:SchedulerResourceView.Mapping>
+                <scheduler:SchedulerResourceMapping
+                     Id = "Id"
+                     Name="Name"
+                     Background="BackgroundColor"
+                     Foreground="ForegroundColor"/>
+            </scheduler:SchedulerResourceView.Mapping>
+        </scheduler:SchedulerResourceView>
+    </scheduler:SfScheduler.ResourceView>
+</scheduler:SfScheduler>
+
+{% endhighlight %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
+
+public class Employee
+{
+    public string Name { get; set; }
+    public object Id { get; set; }
+    public Brush BackgroundBrush { get; set; }
+    public Brush ForegroundBrush { get; set; }
+}
+
+var Resources = new ObservableCollection<Employee>()
+{
+    new Employee() { Name = "Sophia", Id = "1000", BackgroundBrush = Brush.PaleGreen, ForegroundBrush = Brush.Black },
+    new Employee() { Name = "Zoey Addison", Id = "1001", BackgroundBrush = Brush.SkyBlue, ForegroundBrush = Brush.Black },
+    new Employee() { Name = "James William", Id = "1002", BackgroundBrush = Brush.LightPink, ForegroundBrush = Brush.Black },
+};
+
+this.scheduler.ResourceView.Resources = Resources;
+
+{% endhighlight %}
+{% endtabs %}
+
+![customize-drawer-resource-template-in-maui-scheduler](images/resource-view/customize-drawer-resource-template-in-maui-scheduler.png)
+
+N> The BindingContext of the `DrawerResourceTemplate` is the [SchedulerResource.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResource.html) and the custom data object can be bound in `DrawerResourceTemplate` by using `SchedulerResource.DataItem`.
+
 ## Visible Resource Count
 
 The number of resources shown in the day, week, work week, timelineday, timelineweek, timelineworkweek views can be controlled using the [`VisibleResourceCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_VisibleResourceCount) property of the [`SchedulerResourceView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerResourceView.html#Syncfusion_Maui_Scheduler_SchedulerResourceView_Resources) class. This lets you define how many resources are visible at a time.