Merge pull request #6814 from syncfusion-content/984382-scheduler2

Updated the UG document for scheduler Component

Author: VengateshManiraj

blazor/scheduler/accessibility.md

@@ -11,7 +11,7 @@ documentation: ug
 
 The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
-The accessibility compliance for the Blazor Scheduler component is outlined below.
+The accessibility compliance for the Blazor Scheduler component is detailed below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -37,7 +37,7 @@ The accessibility compliance for the Blazor Scheduler component is outlined belo
 
 <div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
 
-## WAI-ARIA attributes
+## WAI-ARIA Attributes
 
 [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.
 
@@ -52,9 +52,9 @@ The following ARIA attributes are used in the Scheduler:
 | aria-describedby | It indicates editor dialog content description to the user through assistive technologies. |
 | aria-disabled | Attribute is set to the appointment element to indicates the disabled state of the Scheduler. |
 
-## Keyboard interaction
+## Keyboard Interaction
 
-All the Scheduler actions can be controlled via keyboard keys and is availed by using `AllowKeyboardInteraction` property which is set to `true` by default. The applicable key combinations and its relative functionalities are listed below.
+All interactive actions within the Blazor Scheduler can be controlled via keyboard keys, supporting users who rely on assistive technologies or prefer keyboard-only navigation. This functionality is enabled by the `AllowKeyboardInteraction` property, which is set to `true` by default. The key combinations and their functionalities are outlined below.
 
 | Windows | Mac | Actions |
 | ----- | ----- | ---- |
@@ -78,12 +78,12 @@ All the Scheduler actions can be controlled via keyboard keys and is availed by
 | <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>Y</kbd> | <kbd>⇧</kbd> + <kbd>⌥</kbd> + <kbd>Y</kbd> | To navigate to today date. |
 | <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>N</kbd> | <kbd>⇧</kbd> + <kbd>⌥</kbd> + <kbd>N</kbd> | To open editor window. |
 
-## Ensuring accessibility
+## Ensuring Accessibility
 
-The Blazor Scheduler component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
+The Blazor Scheduler component's adherence to accessibility standards is rigorously validated through automated testing using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright).
 
-The accessibility compliance of the Scheduler component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/schedule) in a new window to evaluate the accessibility of the Scheduler component with accessibility tools.
+The accessibility compliance of the Scheduler component can be evaluated by opening the [sample](https://blazor.syncfusion.com/accessibility/schedule) in a new window and using various accessibility testing tools.
 
-## See also
+## See Also
 
 * [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

blazor/scheduler/appointment-customization.md

@@ -1,25 +1,25 @@
 ---
 layout: post
-title: Appointment customization in Blazor Scheduler Component | Syncfusion
+title: Appointment Customization in Blazor Scheduler Component | Syncfusion
 description: Checkout and learn here all about appointment customization in Syncfusion Blazor Scheduler component.
 platform: Blazor
 control: Scheduler
 documentation: ug
 ---
 
-# Appointment customization
+# Appointment Customization in Blazor Scheduler Component
 
 The look and feel of the Scheduler events can be customized using any one of the following ways.
 
 * [Using event template](#using-template)
 * [Using EventRendered event](#using-eventrendered-event)
 * [Using CssClass property](#using-cssclass)
 
-## Using template
+## Using Template
 
-Any kind of text, images and links can be added to customize the look of the events. The user can format and change the default appearance of the events by making use of the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Template) option available within the `ScheduleEventSettings` tag helper. 
+An event template provides full control over the rendering of each appointment's content. Text, images, links, and even other Blazor components can be dynamically added to customize the look of events. This is achieved using the [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Template) option available within the `ScheduleEventSettings` property.
 
-To get start quickly on customizing events using template, you can check on this video:
+To get started quickly customizing events using a template, refer to this video:
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=8kBXcBjL12A"%}
@@ -68,11 +68,15 @@ The following code example customizes the appointment.
 }
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLICjtdhIoxxqEi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Template in Blazor Scheduler](./images/template.png)
+
 N> All the built-in fields that are mapped to the appropriate field properties within the `ScheduleEventSettings`, as well as custom mapped fields from the Scheduler dataSource can be accessed within the template code.
 
-## Using EventRendered event
+## Using EventRendered Event
 
-The [EventRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event triggers before the appointment renders on the Scheduler. Therefore, this event can be utilized to customize the look of events based on any specific criteria, before rendering them on the scheduler.
+The [EventRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event triggers just before each appointment is rendered on the Scheduler. This event is highly versatile and can be used to dynamically customize the visual appearance of events based on specific criteria or conditions.
 
 In the following code example, the custom class has been added to events using [CssClasses](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.EventRenderedArgs-1.html#Syncfusion_Blazor_Schedule_EventRenderedArgs_1_CssClasses) to apply color to the events.
 
@@ -122,8 +126,11 @@ In the following code example, the custom class has been added to events using [
     }
 </style>
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrosjDHBybiXDhd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-Also, we can customize the events by adding or modifying its element attribute using [Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.EventRenderedArgs-1.html#Syncfusion_Blazor_Schedule_EventRenderedArgs_1_Attributes). In the following code example, event attributes have been modified through the `Attributes` to apply color to the events.
+![Blazor Scheduler](./images/eventrendered.png)
+
+Events can also be customized by adding or modifying its element attribute using [Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.EventRenderedArgs-1.html#Syncfusion_Blazor_Schedule_EventRenderedArgs_1_Attributes). In the following code example, event attributes have been modified through the `Attributes` to apply color to the events.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule
@@ -166,8 +173,11 @@ Also, we can customize the events by adding or modifying its element attribute u
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVSWtNxVnDNNdNI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor Scheduler](./images/backgroundcolor.png)
 
-## Using CssClass
+## Using CssClass 
 
 The customization of events can also be achieved using the built-in field [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CssClass) in which you can pass the class name to be applied to specific appointments. In the following example, the background of appointments has been changed.
 
@@ -220,6 +230,9 @@ The customization of events can also be achieved using the built-in field [CssCl
     }
 </style>
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLoWXtxBdWIIoLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor Scheduler](./images/eventrendered.png)
 
 Also, the customization of events can be achieved using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CssClass) property of the Scheduler. In the following example, the background of appointments has been changed using the CssClass.
 
@@ -268,4 +281,8 @@ Also, the customization of events can be achieved using [CssClass](https://help.
 </style>
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSWNDnVdhFnoie?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor Scheduler](./images/eventrendered.png)
+
 N> The events can't be customized using the styles that are `height`, `width`, `top`, `left`, `right`, and `display`.