Updated the UG document for Scheduler Component

blazor/scheduler/how-to/blazor-web-assembly-scheduler.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Started With Blazor Scheduler in Web Assembly | Syncfusion
+title: Getting Started with Blazor Scheduler in WebAssembly App| Syncfusion
 description: Checkout and learn about getting started with Blazor WebAssembly and Blazor Scheduler component in Visual Studio and much more.
 platform: Blazor
 control: Scheduler
@@ -9,19 +9,19 @@ documentation: ug
 
 # Blazor Scheduler Component in WebAssembly App using Visual Studio
 
-This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor Scheduler component using [Visual Studio](https://visualstudio.microsoft.com/vs/).
+This article provides step-by-step instructions for building a Blazor WebAssembly App with the Blazor Scheduler component using [Visual Studio](https://visualstudio.microsoft.com/vs/).
 
 ## Prerequisites
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
 ## Create a Blazor WebAssembly App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+A **Blazor WebAssembly App** can be created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Schedule and Themes NuGet in the App
 
-To add `Blazor Scheduler` component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add `Blazor Scheduler` component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -33,7 +33,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available NuGet packages with component details.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
@@ -48,7 +48,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
 
 {% tabs %}
 {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
@@ -70,22 +70,24 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-## Add stylesheet and script resources
+## Add Stylesheet and Script Resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
-
-* For Blazor WebAssembly app, include it in the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet references within the `<head>` section and script references in `<body>` section of the  **~/index.html** file.
 
 ```html
 <head>
     ....
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
+....
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application.
 
-## Add Blazor Scheduler component
+## Add Blazor Scheduler Component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the **~/Pages/Index.razor** file.
 
@@ -128,8 +130,9 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler compon
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the default web browser.
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDreWZtUAkGmFRrB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ![Blazor Scheduler with Appointments](../images/blazor-scheduler-appointments.png)
 
-N> Refer to our [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Scheduler example](https://blazor.syncfusion.com/demos/scheduler/overview) to understand how to manage appointments with multiple resources.
+N> Refer to the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) feature tour page for its groundbreaking feature representations. An additional [Blazor Scheduler example](https://blazor.syncfusion.com/demos/scheduler/overview) is available to understand how to manage appointments with multiple resources.

blazor/scheduler/how-to/create-multiple-events-dynamically.md

@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Add Multi Events in different slots in Blazor Scheduler | Syncfusion
+title: Add Multiple Events in Multiple Slots in Blazor Scheduler | Syncfusion
 description: Learn here all about how to create multiple events in different time slots through CTRL key in Syncfusion Blazor Scheduler component and more.
 platform: Blazor
 control: Scheduler
 documentation: ug
 ---
 
-# Add Multi Events in different slots in Blazor Scheduler Component
+# Add Multiple Events in Multiple Slots in Blazor Scheduler Component
 
-In Blazor Scheduler, we can select the different time slots (10:00 - 10:30, 8:00 - 8:30) by holding CTRL key and click on cells using `OnCellClick` event. In the following code example, events are created on selected timeslots when clicking the **Add Appointments** button.
+The Blazor Scheduler component supports selecting multiple distinct time slots (e.g., 10:00 - 10:30, 8:00 - 8:30) by holding the <kbd>CTRL</kbd> key and clicking on various cells. This functionality is handled using the `OnCellClick` event. The following example demonstrates how new events are created on these selected time slots when an **Add Appointments**button is clicked.
 
 ```cshtml
 @using Syncfusion.Blazor

blazor/scheduler/how-to/custom-editor-with-validation.md

@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Custom Editor With Validation in Blazor Scheduler | Syncfusion
+title: Custom Editor with Validation in Blazor Scheduler | Syncfusion
 description: Learn here all about custom editor with validation in Syncfusion Blazor Scheduler component using Data Annotations and Syncfusion Blazor Dialog.
 platform: Blazor
 control: Scheduler
 documentation: ug
 ---
 
-# Custom Editor With Validation in Blazor Scheduler Component
+# Custom Editor with Validation in Blazor Scheduler Component
 
-By default, in Blazor Scheduler field validation is available for built-in fields, if in case you want to validate a custom field you can go with custom editor and achieve validation using Data Annotations. Data Annotations helps you to define rules to the model classes or properties to perform data validation and display suitable messages to end users.
+By default, the Blazor Scheduler offers field validation for its built-in appointment properties. To implement validation for custom fields within the Scheduler or to enhance existing validations, a custom editor can be leveraged. This can be achieved effectively using Data Annotations to define validation rules on your model properties, coupled with a custom UI for the editor.
 
-The Data Annotation can be enabled by referencing the `System.ComponentModel.DataAnnotations` namespace which maps the data annotations to the corresponding appointment fields. In the following code example, Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dialog is used to render the custom editor and save/update the appointments using public methods.
+Data Annotations enable defining validation rules directly on model classes or their properties, facilitating data validation and displaying informative messages to end-users. This mechanism is enabled by referencing the `System.ComponentModel.DataAnnotations` namespace. In the following example, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dialog component is used to render a custom editor, allowing for the saving or updating of appointments with integrated validation.
 
 ```cshtml
 @using Newtonsoft.Json
@@ -227,6 +227,7 @@ The Data Annotation can be enabled by referencing the `System.ComponentModel.Dat
     }
 </style>
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBIMZDUJNAFfQNV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 The validation is applied on clicking the save button with empty fields as in the following image.
 

blazor/scheduler/how-to/custom-header.md

@@ -9,7 +9,9 @@ documentation: ug
 
 # Custom Header in Blazor Scheduler Component
 
-The Scheduler header bar can be hidden by setting `false` to `ShowHeaderBar` and use Syncfusion<sup style="font-size:70%">&reg;</sup> Toolbar control to customize our own header. In the following code example, the Scheduler views can be changed by using the Dropdowns available in the custom Header.
+The default header bar of the Blazor Scheduler can be hidden by setting the `ShowHeaderBar` property to `false`. This allows for the integration of a custom header, often implemented with the Syncfusion Blazor Toolbar control, to provide personalized navigation and view selection functionalities.
+
+In the following example, the Scheduler views are controlled using a Dropdown within the custom header, and navigation buttons facilitate moving between date ranges.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule
@@ -108,5 +110,6 @@ The Scheduler header bar can be hidden by setting `false` to `ShowHeaderBar` and
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBystjgzXHJQwwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Scheduler with Custom Toolbar](../images/blazor-scheduler-custom-toolbar.png)

blazor/scheduler/how-to/different-work-hours-for-each-days.md

@@ -1,15 +1,17 @@
 ---
 layout: post
-title: Different work hours for each days in blazor schedule | Syncfusion
+title: Different Work Hours for Each Day in Blazor Scheduler | Syncfusion
 description: Learn here all about Set different work hours for each days of the each resource in Syncfusion Blazor Scheduler component using methods and events.
 platform: Blazor
 control: Scheduler
 documentation: ug
 ---
 
-# Different work hours for each days in Blazor Scheduler Component
+# Different Work Hours for Each Day in Blazor Scheduler Component
 
-In Blazor, you can set the required work hours on Scheduler, thus visually highlighting the cells underlying the given work hour range. In the following code example, you can set the different work hours for scheduler cells based on the day of the week by using the `SetWorkHoursAsync` method. Before setting up the custom work hours we need to reset the default work hours by using the `ResetWorkHoursAsync` method.
+The Blazor Scheduler component allows for the customization of work hours, visually highlighting specific cell ranges to represent available working times. To implement custom work hours, the `SetWorkHoursAsync` method is used. Before applying new custom work hours, it is often necessary to clear any previously defined default work hours using the `ResetWorkHoursAsync` method.
+
+In the following example, custom work hours are set for individual days of the week and for different doctor resources. This demonstrates how the Scheduler can reflect complex scheduling requirements.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule
@@ -112,4 +114,7 @@ In Blazor, you can set the required work hours on Scheduler, thus visually highl
         public string? Color { get; set; }
     }
 }
-```
+```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLICXXgJeqHgyuP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor Scheduler Different Work Hours](../images/work-hours.png)

blazor/scheduler/how-to/enable-scroll-option-on-all-day-section.md

@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Enable scroller on all-day section in Blazor Scheduler | Syncfusion
+title: Enable Scroller on All-Day Section in Blazor Scheduler | Syncfusion
 description: Learn here all about how to enable scroll option on all-day section in Syncfusion Blazor Scheduler component when you have more number of appointments in a day.
 platform: Blazor
 control: Scheduler
 documentation: ug
 ---
 
-# Enable scroll option on all-day section in Blazor Scheduler Component
+# Enable Scroll Option on All-Day Section in Blazor Scheduler Component
 
-When there are larger number of appointments in all-day row, it is difficult to view all the appointments properly. In that case you can enable scroller option for all-day row by setting true to `EnableAllDayScroll` whereas its default value is false. When setting this property to true, individual scroller for all-day row is enabled when it reaches its maximum height on expanding.
+scheduled in the all-day row, viewing all of them simultaneously can become challenging. To address this, the Blazor Scheduler component provides a scroll option for the all-day row. By setting `EnableAllDayScroll` to `true` (its default value is `false`), an individual scroller is enabled for the all-day row, activating when its content exceeds its maximum height upon expansion.
 
-N> This property is not applicable for Scheduler with height `auto`.
+N> This property is not applicable for Scheduler components where the `Height` property is set to `auto`.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule

blazor/scheduler/how-to/expand-collapse-resource-dynamically.md

@@ -1,15 +1,17 @@
 ---
 layout: post
-title: Expand And Collapse Resource in Blazor Scheduler | Syncfusion
+title: Expand and Collapse Resource in Blazor Scheduler | Syncfusion
 description: Learn here all about how to expand and collapse resource dynamically in timeline views of Syncfusion Blazor Scheduler component.
 platform: Blazor
 control: Scheduler
 documentation: ug
 ---
 
-# Expand And Collapse Resource Dynamically in Blazor Scheduler Component
+# Expand and Collapse Resource Dynamically in Blazor Scheduler Component
 
-In Blazor Scheduler, a resource can be expanded or collapsed by clicking the expand/collapse icons. You can also programmatically expand or collapse the resource using public methods `ExpandResourceAsync` and `CollapseResourceAsync` respectively. The following code shows how to expand and collapse the resource `Room 1` on external button click.
+The Blazor Scheduler provides interactive expand/collapse functionality for resources in its timeline views, typically controlled by UI icons. Additionally, resources can be programmatically expanded or collapsed using the public methods `ExpandResourceAsync` and `CollapseResourceAsync`, respectively. This offers flexible control over the resource display.
+
+The following example demonstrates how to dynamically expand and collapse the `Room 1` resource using external buttons. This is particularly useful for controlling nested resources within a grouped timeline view.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule
@@ -97,3 +99,6 @@ In Blazor Scheduler, a resource can be expanded or collapsed by clicking the exp
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVyMDXgfUsvhHom?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor Scheduler with Expand and Collapse](../images/expand-collapse.png)