diff --git a/blazor/scheduler/accessibility.md b/blazor/scheduler/accessibility.md index 408ae8dbfb..d957bbf48c 100644 --- a/blazor/scheduler/accessibility.md +++ b/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
No - The component does not meet the requirement.
-## 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 | Shift + Alt + Y | ⇧ + ⌥ + Y | To navigate to today date. | | Shift + Alt + N | ⇧ + ⌥ + N | 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® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/scheduler/appointment-customization.md b/blazor/scheduler/appointment-customization.md index 4b8640a55a..e8c36c59d4 100644 --- a/blazor/scheduler/appointment-customization.md +++ b/blazor/scheduler/appointment-customization.md @@ -1,13 +1,13 @@ --- 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. @@ -15,11 +15,11 @@ The look and feel of the Scheduler events can be customized using any one of the * [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 [ } ``` +{% 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 } ``` +{% 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. ``` +{% 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`. \ No newline at end of file diff --git a/blazor/scheduler/appointment-drag-and-drop.md b/blazor/scheduler/appointment-drag-and-drop.md index d1a7824e63..82e29aca2e 100644 --- a/blazor/scheduler/appointment-drag-and-drop.md +++ b/blazor/scheduler/appointment-drag-and-drop.md @@ -1,30 +1,30 @@ --- layout: post -title: Drag and drop in Blazor Scheduler Component | Syncfusion -description: Checkout and learn here all about recurring events in Syncfusion Blazor Scheduler component. +title: Drag and Drop in Blazor Scheduler Component | Syncfusion +description: Learn how to implement drag and drop functionality for events within the Syncfusion Blazor Scheduler component. platform: Blazor control: Scheduler documentation: ug --- -# Drag and drop +# Drag and Drop in Blazor Scheduler Component -Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality make sure that [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowDragAndDrop) is set to **true** on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location. +Appointments within the Scheduler can be easily rescheduled by dragging and dropping them to a new time slot or resource. This functionality is enabled by ensuring the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowDragAndDrop) property on the `SfSchedule` component is set to `true`. On mobile devices, events can be dragged and dropped by tap-holding an appointment and then dragging it to the desired location. -N> By default, drag and drop action is applicable on all Scheduler views, except Agenda and Month-Agenda view. +N> By default, drag-and-drop actions are applicable in all Scheduler views except the Agenda and Month-Agenda views. -To get start quickly about drag options available in our Scheduler, you can check on this video: +To get started quickly with the drag options available in the Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=Vtl1Wyuwt-0"%} -## Drag and drop multiple appointments +## Drag and Drop Multiple Appointments -Multiple appointments can be dragged and dropped by enabling the [AllowMultiDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiDrag) property. Multiple appointments can be selected by holding the CTRL key. Once the events are selected, leave the CTRL key and start dragging the event. +Multiple appointments can be dragged and dropped simultaneously by enabling the [`AllowMultiDrag`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiDrag) property. To select multiple appointments, hold down the CTRL key while clicking on desired events. Once the events are selected, release the CTRL key and then drag any of the selected events to move the entire group. -Multiple events can also be dragged from one resource to another resource. In this case, if all the selected events are in the different resources, then all the events should be moved to the single resource that is related to the target event. +Multiple events can also be dragged from one resource to another. In scenarios where selected events originate from different resources, all selected events will be moved to the single resource associated with the target drop location. -N> Multiple events drag and drop is not supported on mobile devices. +N> Multiple event drag and drop is not supported on mobile devices. ```cshtml @using Syncfusion.Blazor.Schedule @@ -63,9 +63,13 @@ N> Multiple events drag and drop is not supported on mobile devices. } ``` -## Disable the drag action +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhyiXNHBRecufMs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -By default, the events can be dragged and dropped within any of the applicable scheduler views, and to disable it, set **false** to the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowDragAndDrop) property. +![Drag and Drop in Blazor Scheduler](./images/drag-drop.png) + +## Disable the Drag Action + +By default, appointments can be dragged and dropped within any applicable Scheduler view. To disable this functionality, set the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowDragAndDrop) property to `false` on the `SfSchedule` component. ```cshtml @using Syncfusion.Blazor.Schedule @@ -102,10 +106,11 @@ By default, the events can be dragged and dropped within any of the applicable s } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVeijZxVddvMclV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Preventing drag and drop on specific targets +## Preventing Drag and Drop on Specific Targets -It is possible to prevent the drag action on particular target, by passing the target to be excluded in the `ExcludeSelectors` option within [OnDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event. +The drag action can be prevented on particular target HTML elements by configuring the `ExcludeSelectors` option within the [`OnDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event arguments. This allows appointments to be dropped only on permissible areas. ```cshtml @using Syncfusion.Blazor.Schedule @@ -147,10 +152,11 @@ It is possible to prevent the drag action on particular target, by passing the t } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthIiDDdBnFmpIwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Disable scrolling on drag action +## Disable Scrolling on Drag Action -By default, while dragging an appointment to the edges, either top/bottom in the vertical Scheduler or left/right in the timeline Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the `Scroll` value within the [OnDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event arguments. +By default, when dragging an appointment near the edges of the Scheduler (top/bottom in vertical views, left/right in timeline views), automatic scrolling occurs. To prevent this behavior, set `args.Scroll.Enable` to `false` within the [`OnDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event arguments. ```cshtml @using Syncfusion.Blazor.Schedule @@ -192,10 +198,14 @@ By default, while dragging an appointment to the edges, either top/bottom in the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNreCtDHrHOIuJPU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Drag and Drop in Blazor Scheduler](./images/disable-scrolling.gif) -## Controlling scroll speed while dragging an event -The speed of the scrolling action while dragging an appointment to the Scheduler edges can be controlled within the [OnDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event by setting the desired value to the `ScrollBy` and `TimeDelay` option, whereas its default value is 30 minutes and 100ms. +## Controlling Scroll Speed While Dragging An Event + +The speed of the automatic scrolling action that occurs when dragging an appointment to the Scheduler edges can be controlled. This is done within the [`OnDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event by setting the desired values for `args.Scroll.ScrollBy` and `args.Scroll.TimeDelay`. The default values are 30 minutes for `ScrollBy` and 100ms for `TimeDelay`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -238,12 +248,13 @@ The speed of the scrolling action while dragging an appointment to the Scheduler } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSCZjRqCPpImEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Auto navigation of date ranges on dragging an event +## Auto Navigation of Date Ranges on Dragging an Event -When an event is dragged either to the left or right extreme edges of the Scheduler and kept hold for few seconds without dropping, the auto navigation of date ranges will be enabled allowing the Scheduler to navigate from current date range to back and forth respectively. This action is set to `false` by default and to enable it, set `Navigation` to true within the [OnDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event. +When an event is dragged to the left or right extreme edges of the Scheduler and held there for a few seconds without being dropped, the Scheduler can automatically navigate to the previous or next date range. This `Navigation` action is `false` by default and can be enabled by setting `args.Navigation.Enable` to `true` within the [`OnDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event. -By default, the navigation delay is set to 2000ms. The navigation delay decides how long the user needs to drag and hold the appointments at the extremities. You can also set your own delay value for letting the users to navigate based on it, using the `TimeDelay` within the [OnDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event. +The delay before navigation occurs is controlled by `args.Navigation.TimeDelay`, which defaults to 2000ms. This value determines how long an appointment needs to be held at the extremity before the date range shifts. A custom delay value for navigation can be configured using `TimeDelay` within the `OnDragStart` event. ```cshtml @using Syncfusion.Blazor.Schedule @@ -286,10 +297,11 @@ By default, the navigation delay is set to 2000ms. The navigation delay decides } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBSMDXngMOhBLjP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Setting drag time interval +## Setting Drag Time Interval -By default, while dragging an appointment, it moves at an interval of 30 minutes. To change the dragging time interval, pass the appropriate values to the `Interval` option within the [OnDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event. +By default, when dragging an appointment, it snaps to an interval of 30 minutes. To change this dragging time interval, pass the appropriate value (in minutes) to the `args.Interval` option within the [`OnDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnDragStart) event. ```cshtml @using Syncfusion.Blazor.Schedule @@ -332,11 +344,13 @@ By default, while dragging an appointment, it moves at an interval of 30 minutes } ``` -## Drag and drop items from external source +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVSMtZRAWYkImvg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Drag and Drop Items from External Source -It is possible to drag and drop the unplanned items from any of the external source into the scheduler, by manually saving those dropped item as a new appointment data through [AddEventAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AddEventAsync__0_) method of Scheduler. +It is possible to drag unplanned items from any external source into the Scheduler. These dropped items are then saved as new appointment data using the [`AddEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AddEventAsync__0_) method of the Scheduler. -To get start quickly about dropping items from external source to our Scheduler, you can check on this video: +To get started quickly with dropping items from an external source to the Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=QxBBZYef6cg"%} @@ -441,10 +455,12 @@ In this example, the tree view control is used as an external source and the chi } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyiNtdKLMYRqIt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Drag and drop items to external source +## Drag and Drop Items to External Source -You can drag and drop the events to external source by setting the target to the property [EventDragArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EventDragArea). In the following code example, we have two Scheduler and events from the first scheduler that can be dropped to the second scheduler. In the [Dragged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event of the first scheduler, the dragged event has been deleted from the first scheduler and added to the second scheduler. +Events can also be dragged from the Scheduler to an external target. This is configured by setting the target's CSS selector to the [`EventDragArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EventDragArea) property of the source Scheduler. +In the following example, two Scheduler instances are used. Events from the first Scheduler can be dragged and dropped into the second Scheduler. The [Dragged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event of the source Scheduler is used to handle the transfer: the dragged event is deleted from the first Scheduler and then added to the second. ```cshtml @using Syncfusion.Blazor.Schedule @@ -510,10 +526,11 @@ You can drag and drop the events to external source by setting the target to the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVyMZXdABLxWcgM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Opening the editor window on drag stop +## Opening the Editor Window on Drag Stop -There are scenarios where you want to open the editor filled with data on newly dropped location and may need to proceed to save it, only when `Save` button is clicked on the editor. Clicking on the cancel button should revert these changes. This can be achieved using the [Dragged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event of Scheduler. +In some scenarios, after an appointment is dragged and dropped to a new location, an editor window might need to appear, pre-filled with the appointment's updated details. This allows the user to review or modify the changes before finally saving them. If the "Cancel" button is clicked in the editor, the changes should be reverted. This behavior can be implemented using the [`Dragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event of the Scheduler. ```cshtml @using Syncfusion.Blazor.Schedule @@ -557,3 +574,4 @@ There are scenarios where you want to open the editor filled with data on newly } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtryiDNxKrKhLmjo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/scheduler/appointment-resizing.md b/blazor/scheduler/appointment-resizing.md index 490d1e31a0..e7f42b94cf 100644 --- a/blazor/scheduler/appointment-resizing.md +++ b/blazor/scheduler/appointment-resizing.md @@ -1,24 +1,24 @@ --- layout: post title: Resizing in Blazor Scheduler Component | Syncfusion -description: Checkout and learn here all about resizing events in Syncfusion Blazor Scheduler component. +description: Learn how to resize events easily in the Syncfusion Blazor Scheduler component with step-by-step instructions and practical examples. platform: Blazor control: Scheduler documentation: ug --- -# Resizing +# Resizing Appointments -Another way of rescheduling an appointment can be done by resizing it through either of its handlers. To work with resizing functionality make sure that [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowResizing) property is set to **true**. +Appointments can be rescheduled by changing their duration through resizing via interactive handlers.To enable resizing functionality, ensure the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowResizing) property is set to `true` on the `SfSchedule` component. -To get start quickly about resize options available in our Scheduler, you can check on this video: +To get started quickly with the resize options available in the Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=Vtl1Wyuwt-0"%} -## Disable the resize action +## Disable the Resize Action -By default, resizing of events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable this event resizing action, set false to the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowResizing) property. +By default, resizing of appointments is allowed in all applicable Scheduler views. To disable this event resizing action, set the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowResizing) property to `false`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -55,10 +55,11 @@ By default, resizing of events is allowed on all Scheduler views except Agenda a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLyCNNxqBwmnoJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Disable scrolling on resize action +## Disable Scrolling on Resize Action -By default, while resizing an appointment, when its handler reaches the extreme edges of the Scheduler, scrolling action will takes place along with event resizing. To prevent this scrolling action, set false to `Scroll` value within the [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event. +By default, when resizing an appointment, if its handler reaches the extreme edges of the Scheduler, an automatic scrolling action occurs. To prevent this scrolling behavior, set the `args.Scroll.Enable` property to `false` within the [`OnResizeStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event arguments. ```cshtml @using Syncfusion.Blazor.Schedule @@ -100,10 +101,11 @@ By default, while resizing an appointment, when its handler reaches the extreme } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhoiNZxqhOVrtTC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Controlling scroll speed while resizing an event +## Controlling Scroll Speed While Resizing An Event -The speed of the scrolling action while resizing an appointment to the Scheduler edges, can be controlled within the [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event by setting the desired value to the [ScrollBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScrollOptions.html#Syncfusion_Blazor_Schedule_ScrollOptions_ScrollBy) option. +The speed of the automatic scrolling action that occurs when resizing an appointment near the Scheduler edges can be controlled. This is done within the [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event by setting the desired value to the [ScrollBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScrollOptions.html#Syncfusion_Blazor_Schedule_ScrollOptions_ScrollBy) option. ```cshtml @using Syncfusion.Blazor.Schedule @@ -146,9 +148,11 @@ The speed of the scrolling action while resizing an appointment to the Scheduler } ``` -## Setting resize time interval +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoWDZnghaGYtRM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -By default, while resizing an appointment, it extends or shrinks at an interval of 30 minutes. To change this default resize interval, set appropriate values to `Interval` option within the [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event. +## Setting Resize Time Interval + +By default, when resizing an appointment, its duration extends or shrinks in 30-minute intervals. To change this default resize interval, pass the desired minute value to the `args.Interval` option within the [`OnResizeStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event arguments. ```cshtml @using Syncfusion.Blazor.Schedule @@ -190,3 +194,4 @@ By default, while resizing an appointment, it extends or shrinks at an interval } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVSCNNxAUtFwMDC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/scheduler/appointments.md b/blazor/scheduler/appointments.md index 3dfb55cdac..9b7f7abc77 100644 --- a/blazor/scheduler/appointments.md +++ b/blazor/scheduler/appointments.md @@ -9,20 +9,20 @@ documentation: ug # Appointments in Blazor Scheduler Component -Appointments can be anything that are scheduled for a specific time period. It can be created on varied time range and each appointments are categorized based on this range. +Appointments represent scheduled items for a specific time period within the Scheduler. They can cover varied time ranges and are categorized based on these ranges. -To get start quickly about appointments and how to customize it, you can check on this video: +For a quick overview of appointments and their customization, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=Vtl1Wyuwt-0"%} -## Event fields +## Event Fields -The Scheduler dataSource usually holds the event instances, where each of the instance includes a collection of appropriate [fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html). It is mandatory to map these fields with the equivalent fields of database, when remote data is bound to it. When the local data is bound, then the field names defined within the instances needs to be mapped with the scheduler event fields correctly. +The Scheduler's data source typically holds event instances, where each instance includes a collection of appropriate [fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html). These fields must be mapped to equivalent database fields when binding remote data. For local data, the field names defined within the `AppointmentData` instances need to be correctly mapped to the Scheduler's event fields. -N> To create an event on Scheduler, it is enough to define the `StartTime` and `EndTime` fields. In case, if remote data is bound to Scheduler, then `Id` field becomes mandatory to process the CRUD actions on appropriate events. +N> To create an event in the Scheduler, it is sufficient to define the `StartTime` and `EndTime` fields. When remote data is bound to the Scheduler, the `Id` field becomes mandatory for processing CRUD actions on events. -### Built-in fields +### Built-in Fields The built-in fields available on Scheduler event object are as follows. @@ -44,9 +44,9 @@ The built-in fields available on Scheduler event object are as follows. | IsBlock | It maps the [`IsBlock`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_IsBlock) field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots. | | CssClass | It maps the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_CssClass) field from the dataSource. It is used to customize the particular events. | -### Binding different field names +### Binding Different Field Names -When the fields of event instances has the default mapping name, it is not mandatory to map them manually. If a Scheduler's dataSource holds the events collection with different field names, then it is necessary to map them with its equivalent field name within the [EventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ISchedule.html#Syncfusion_Blazor_Schedule_ISchedule_EventSettings) property. +When event instances use default field names, manual mapping is often not required. However, if Scheduler's dataSource holds the events collection with different field names, then it is necessary to map them with its equivalent field name within the [EventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ISchedule.html#Syncfusion_Blazor_Schedule_ISchedule_EventSettings) property. ```cshtml @using Syncfusion.Blazor.Schedule @@ -98,11 +98,15 @@ When the fields of event instances has the default mapping name, it is not manda } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVoCNtdqUBRzczg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](./images/bind-eventnames.png) + N> The mapper field [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_Id) is of string type and has no additional validation options, whereas all other fields has additional options. -### Event field settings +### Event Field Settings -Each field of the Scheduler events are provided with additional settings such as options to set default value, to map with appropriate data source fields, to validate every event fields and to provide label values for those fields in the event window. +Each field within the Scheduler events can be configured with additional settings, such as options to set default values, map to specific data source fields, define validation rules, and provide custom labels for fields in the event editor window. | Options | Description | | ------- | ----------- | @@ -156,7 +160,11 @@ In following example, the Subject field in event editor will display its appropr } ``` -### Adding Custom fields +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBeWXXnUgzWFryN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](./images/field-settings.png) + +### Adding Custom Fields Apart from the default Scheduler fields, the user can include 'n' number of custom fields for appointments. The following code example shows how to include two custom fields namely **Status** and **Priority** within event collection. It is not necessary to bind the custom fields within the [EventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ISchedule.html#Syncfusion_Blazor_Schedule_ISchedule_EventSettings). However, those additional fields can be accessed easily, for internal processing as well as from application end. @@ -200,13 +208,18 @@ Apart from the default Scheduler fields, the user can include 'n' number of cust } ``` -## Normal events +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZtRqUyFbmIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](./images/custom-fields.png) + -Represents an appointment that is created for any specific time interval within a day. +## Normal Events -### Creating a normal event +A normal event represents an appointment scheduled for a specific time interval within a single day. -The following example depicts how to define a normal event on the Scheduler, with event data being loaded from simple list of appointment collection. +### Creating a Normal Event + +The following example depicts how to define a normal event in the Scheduler, with event data loaded from a simple list of appointment collections. ```cshtml @using Syncfusion.Blazor.Schedule @@ -237,20 +250,23 @@ The following example depicts how to define a normal event on the Scheduler, wit } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSitZRUAQjvijV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](./images/normal-event.png) -## Spanned events +## Spanned Events Represents an appointment that is created for more than 24 hours, and usually displayed on the all-day row. Also, represents another type of appointment that is created for more than one day but less than 24 hours, and usually displayed appropriately on both the days. N> For example, in week view if an appointment is created for two days say from November 25, 2020 – 11.00 PM to November 26, 2020 - 2.00 AM but less than 24 hours time interval, then the appointment split into two partitions and will be displayed on both the days. -## All-day events +## All-Day Events -It represents an appointment that is created for an entire day such as holiday events. It is usually displayed separately in an all-day row, a separate row for all-day appointments below the date header section. In Timeline views, the all-day appointments displays in the working space area, and no separate all-day row is present in that view. +An all-day event represents an appointment that spans an entire day, such as a holiday or a full-day conference. These are usually displayed in a dedicated all-day row, which is a separate section below the date header. In Timeline views, all-day appointments are displayed horizontally within the working space area, as a separate all-day row is not typically present in those views. N> To change normal appointment into all-day event, set [`IsAllDay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldIsAllDay.html) field to true. -### Hide all-day row events +### Hide All-Day Row Events The CSS customization can be used to prevent the display of all-day row appointments on the Scheduler UI. @@ -262,7 +278,7 @@ The CSS customization can be used to prevent the display of all-day row appointm ## Block Date and Time -It is possible to block a set of dates or a particular time ranges on the Scheduler. To do so, define an appointment object within [EventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ISchedule.html#Syncfusion_Blazor_Schedule_ISchedule_EventSettings) along with the required time range to block and set the [IsBlock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_IsBlock) field to **true**. Usually, the event objects defined with `IsBlock` field set to true will block the entire time cells lying within the appropriate time ranges specified through `StartTime` and `EndTime` fields. +Specific date ranges or individual time slots within the Scheduler can be blocked to prevent appointment creation or indicate unavailability. To do so, define an appointment object within [EventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ISchedule.html#Syncfusion_Blazor_Schedule_ISchedule_EventSettings) along with the required time range to block and set the [IsBlock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_IsBlock) field to **true**. Usually, the event objects defined with `IsBlock` field set to true will block the entire time cells lying within the appropriate time ranges specified through `StartTime` and `EndTime` fields. ```cshtml @using Syncfusion.Blazor.Schedule @@ -301,10 +317,12 @@ It is possible to block a set of dates or a particular time ranges on the Schedu } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthoMDNHqAPappdA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Block Date and Time in Blazor Scheduler](images/blazor-scheduler-block-events.png) -Block events can also be defined to repeat on several days as shown in the following code example. +Block events can also be configured to repeat over several days, similar to recurring appointments, as shown in the following code example. ```cshtml @using Syncfusion.Blazor.Schedule @@ -344,11 +362,13 @@ Block events can also be defined to repeat on several days as shown in the follo } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVoMNZHgAYJoZqF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Block Several Date and Time in Blazor Scheduler](images/blazor-scheduler-multiple-block-events.png) ## Readonly -An interaction with the appointments of Scheduler can be enabled/disabled using the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_Readonly) property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as **false**. +To enable or disable interaction with appointments across the entire Scheduler, the [`Readonly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_Readonly) property is used. When this property is set to `true`, users can navigate between Scheduler dates and views, and view appointment details in the quick info window, but are prevented from performing any CRUD (Create, Read, Update, Delete) actions on the Scheduler. By default, `Readonly` is set to `false`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -386,9 +406,13 @@ An interaction with the appointments of Scheduler can be enabled/disabled using } ``` -## Make specific events readonly +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBIWtDdgJZVqOpp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![ReadOnly Appointments in Blazor Scheduler](images/readonly.png) -There are scenarios where you need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting [IsReadonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_IsReadonly) field of read-only events to `true`. +## Make Specific Events Read-Only + +There are scenarios where user need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting [IsReadonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_IsReadonly) field of read-only events to `true`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -429,11 +453,15 @@ There are scenarios where you need to restrict the CRUD action on specific appoi } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoCNXnKJBCmHLm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Specific-ReadOnly Appointments in Blazor Scheduler](images/specific-readonly.png) + N> By default, the event editor is prevented to open on the read-only events when [`IsReadonly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html#Syncfusion_Blazor_Schedule_ScheduleField_IsReadonly) field is set to **true**. -## Customize the order of the overlapping events +## Customize the Order of Overlapping Events -By default, the scheduler will render the overlapping events based on the start and end time. Now, the order of the overlapping events can be customized based on the custom fields by using the [SortBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_SortBy) property grouped under the [EventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ISchedule.html#Syncfusion_Blazor_Schedule_ISchedule_EventSettings) property. The following code example shows how to sort the appointments based on the custom field **RankId** as follows. +By default, the Scheduler renders overlapping events based on their start and end times internally. The display order of overlapping events can be customized according to a custom field by using the [SortBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_SortBy) property grouped under the [EventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ISchedule.html#Syncfusion_Blazor_Schedule_ISchedule_EventSettings) property. The following code example shows how to sort the appointments based on the custom field **RankId** as follows. ```cshtml @using Syncfusion.Blazor.Schedule @@ -478,19 +506,20 @@ By default, the scheduler will render the overlapping events based on the start } } ``` + ![Blazor Scheduler with Overlapping Events](images/blazor-scheduler-overlapping-events.png) ## Preventing Overlapping Events -By default, the scheduler displays overlapping events according to their start and end times. To prevent overlapping, you can set the [AllowOverlap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowOverlap) property to `false`. +By default, the Scheduler displays events that overlap according to their start and end times. To prevent overlapping, set the [`AllowOverlap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowOverlap) property to `false`. -When this property is set to `false`, any new or updated events that overlap with existing ones will trigger an overlap alert. The overlapping events will be collected in the [OverlapCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.PopupOpenEventArgs-1.html#Syncfusion_Blazor_Schedule_PopupOpenEventArgs_1_OverlapCollection) within the [PopupOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.PopupOpenEventArgs-1.html). +When this property is set to `false`, any new or updated events that attempt to overlap with existing ones will trigger an overlap alert. The conflicting events are collected in the [`OverlapCollection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.PopupOpenEventArgs-1.html#Syncfusion_Blazor_Schedule_PopupOpenEventArgs_1_OverlapCollection) within the [PopupOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.PopupOpenEventArgs-1.html). When the [AllowOverlap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowOverlap) property is set to false, the scheduler behaves as follows: * **Initial Load Behavior:** Upon initial loading, the scheduler prioritizes non-overlapping events based on their duration and all-day status. Events with longer durations and those marked as all-day receive higher priority to ensure there are no overlaps. * **Recurring Appointments:** If there are conflicts within a recurring appointment series during the initial load, the scheduler will display all occurrences of the series, except for the conflicting instance. * **Event Modifications:** When a user edits, saves, or removes appointments, the scheduler checks for potential overlaps. If a conflict is detected, the action is blocked, and a conflict alert is displayed to the user to address the issue. -* **Dynamic Recurrence Series Creation or Editing:** When a user creates or edits a recurrence series dynamically, the scheduler will prevent any occurrences of the series from being added if a conflict is found within the series. +* **Dynamic Recurrence Series Creation or Editing:** When a recurrence series is created or edited dynamically, the Scheduler prevents any occurrences of the series from being added if a conflict is found within the series. ```cshtml @using Syncfusion.Blazor.Schedule @@ -538,11 +567,14 @@ When the [AllowOverlap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBeMtDxqJpojNSf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Preventing-Overlap in Blazor Scheduler](images/prevent-overlap.png) ### Limitations -* The [AllowOverlap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowOverlap) property checks for overlaps only within the currently rendered date event collection. This means that if you have events scheduled outside of the visible date range, the overlap check will not consider them by default. +* The [`AllowOverlap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowOverlap) property checks for overlaps only within the currently rendered event collection for the visible date range. This means that events scheduled outside the currently visible date range are not considered by default in this check. -* If you need to check for overlaps with events that are outside the current rendered dates, you can trigger the [ActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event. This event allows you to perform custom logic to check for overlaps across all events, including those outside the visible date range, ensuring a more comprehensive overlap check. +* To check for overlaps with events outside the current rendered dates, the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event can be utilized. This event allows implementing custom logic to perform a more comprehensive overlap check across all events, including those outside the visible date range. ```cshtml @@ -578,7 +610,7 @@ When the [AllowOverlap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. { if (args.ActionType == ActionType.EventCreate || args.ActionType == ActionType.EventChange) { - // you can perform custom logic to check for overlaps across all events. + // Custom logic can be performed here to check for overlaps across all events. } } @@ -595,11 +627,14 @@ When the [AllowOverlap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVoitXnKJdCamRQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](images/prevent-overlap.png) -## Restricting event creation on specific time slots -You can restrict the users to create and update more than one appointment on specific time slots. Also, you can disable the CRUD action on those time slots if it is already occupied, which can be achieved using Scheduler’s public method [IsSlotAvailableAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_IsSlotAvailableAsync__0_). +## Restricting Event Creation on Specific Time Slots +The Scheduler allows for restricting users from creating or updating more than one appointment on specific time slots, and also disabling CRUD actions on time slots that are already occupied. This can be achieved using the Scheduler’s public method [`IsSlotAvailableAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_IsSlotAvailableAsync__0_). ->Note: The **IsSlotAvailableAsync** is centered around verifying appointments within the present view's date range. Yet, it does not encompass an evaluation of availability for recurrence occurrences that fall beyond this particular date range. +>Note: The `IsSlotAvailableAsync` method is designed to verify appointment availability primarily within the present view's date range. It does not encompass an evaluation of availability for recurrence occurrences that fall beyond this particular date range. ```cshtml @using Syncfusion.Blazor.Schedule @@ -648,9 +683,11 @@ You can restrict the users to create and update more than one appointment on spe } ``` -## Differentiate the past time events +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVoWttdqSMbcRNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -To differentiate the appearance of the appointments based on specific criteria such as displaying the past hour appointments with different colors on Scheduler, [EventRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event can be used which triggers before the appointment renders on the Scheduler. +## Differentiate Past Time Events + +To visually differentiate appointments based on specific criteria, such as displaying past appointments with a different color, the [`EventRendered`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event can be used. This event triggers before each appointment renders on the Scheduler, allowing for dynamic styling modifications. In the following code example, the appointments beyond current date of the scheduler were differentiated with chocolate brown color. @@ -698,11 +735,15 @@ In the following code example, the appointments beyond current date of the sched ``` -## Appointments occupying entire cell +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVeMtNRUSgNYpTK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Differentiate Past Time Events in Blazor Scheduler](images/different-color.png) + +## Appointments Occupying Entire Cell -The Scheduler allows the event to occupy the full height of the cell without its header part by setting `true` for [EnableMaxHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableMaxHeight) Property. +The Scheduler allows appointments to occupy the full height of their respective cells, excluding the header part, by setting [`EnableMaxHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableMaxHeight) to `true`. -More indicator can be shown if more than one appointment is available in a same cell by setting `true` to [EnableIndicator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableIndicator) property whereas its default value is false. +If multiple appointments are present in the same cell, a more compact display can be achieved by setting [`EnableIndicator`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableIndicator) to `true` (its default value is `false`). ```cshtml @using Syncfusion.Blazor.Schedule @@ -738,18 +779,19 @@ More indicator can be shown if more than one appointment is available in a same } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIMNZnAepwllVr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Differentiate Past Time Events in Blazor Scheduler](images/blazor-scheduler-appointments-entirecell.png) +![Appointments Occupying Entire Cell in Blazor Scheduler](images/blazor-scheduler-appointments-entirecell.png) -N> The [`EnableIndicator`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableIndicator) property will work, only when the [`EnableMaxHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableMaxHeight) property value is set to true. +N> The [`EnableIndicator`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableIndicator) property functions only when the [`EnableMaxHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableMaxHeight) property value is set to true. -## Display tooltip for appointments +## Display Tooltip for Appointments The tooltip shows the Scheduler appointment's information in a formatted style by making use of the tooltip related options. -### Show or hide built-in tooltip +### Show or Hide Built-in Tooltip -The tooltip can be displayed for appointments by setting `true` to the [EnableTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableTooltip) option within the `ScheduleEventSettings` tag helper. +A tooltip can be displayed for appointments by setting [`EnableTooltip`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_EnableTooltip) to `true` within the `` tag. ```cshtml @using Syncfusion.Blazor.Schedule @@ -789,12 +831,13 @@ The tooltip can be displayed for appointments by setting `true` to the [EnableTo } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVysXDnKIogBhhz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Built-in Tooltip in Blazor Scheduler](images/blazor-scheduler-appointments-tooltip.png) -### Customizing event tooltip using template +### Customizing Event Tooltip Using Template -After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_TooltipTemplate) option within the `ScheduleEventSettings`. +After enabling the default tooltip, the display of event information within the tooltip can be customized by using the [`TooltipTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_TooltipTemplate) option within `ScheduleEventSettings`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -840,17 +883,17 @@ After enabling the default tooltip, it is possible to customize the display of n } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhesZNnAoxBLKzr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Tooltip in Blazor Scheduler](images/blazor-scheduler-appointments-tooltip-template.png) -N> All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the `ScheduleEventSettings` can be accessed within the template. +N> All field names mapped from the Scheduler data source to the appropriate field properties (such as `Subject`, `Description`, `Location`, `StartTime`, and `EndTime`) within `ScheduleEventSettings` can be accessed within the template. -### How to prevent the tooltip for specific events +### How to Prevent the Tooltip for Specific Events -By using the [`TooltipOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_TooltipOpening) event, you can selectively control when tooltips appear, based on appointment data or other custom conditions. - -To prevent a tooltip from appearing for certain events, you can set the `cancel` property to `true` within the [`TooltipOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_TooltipOpening) event. This ensures that tooltips are only displayed for the relevant appointments, improving user experience by minimizing unnecessary distractions. +The [`TooltipOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_TooltipOpening) event allows for selectively controlling when tooltips appear, based on appointment data or other custom conditions. +To prevent a tooltip from appearing for certain events, set the `args.Cancel` property to `true` within the [`TooltipOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_TooltipOpening) event handler. This ensures that tooltips are displayed only for relevant appointments, minimizing unnecessary distractions for the user. ```cshtml @using Syncfusion.Blazor.Schedule @@ -898,26 +941,26 @@ To prevent a tooltip from appearing for certain events, you can set the `cancel` } ``` -## Appointment selection +## Appointment Selection -Appointment selection can be done either through mouse or keyboard actions. The selected events in UI will have a box shadow effect around to differentiate it from other appointments. +Appointments can be selected via mouse clicks or keyboard actions. Selected events in the UI are typically visually differentiated (e.g., with a box shadow effect) from other appointments. | Action | Description | |-------|---------| | Mouse click or Single tap on appointments | Selects single appointment. | | Ctrl + [Mouse click] or [Single tap] on appointments | Selects multiple appointments.| -## Deleting multiple appointments +## Deleting Multiple Appointments -With the options available to select multiple appointments, it is also possible to delete the multiple selected appointments simply by pressing the `delete` key. In case of deleting multiple selected occurrences of an event series, only those occurrences will be deleted and not the entire series. +When multiple appointments are selected, it is possible to delete them simultaneously by pressing the Delete key. If multiple selected events are occurrences of a recurring series, only those specific occurrences will be deleted, not the entire series. -## Retrieve event details from the UI of an event +## Retrieve Event Details from the UI of an Event -It is possible to access the information about the event fields of an appointment based on the X and Y co-ordinates. This can be achieved by passing an X and Y co-ordinates to the public method [GetTargetEventAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetTargetEventAsync_System_Int32_System_Int32_). You can also get the selected appointment details using [GetSelectedEventsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetSelectedEventsAsync) method. +Information about event fields of an appointment can be accessed based on its X and Y coordinates. This is achieved by passing X and Y coordinates to the public method [`GetTargetEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetTargetEventAsync_System_Int32_System_Int32_). Additionally, selected appointment details can be retrieved using the [`GetSelectedEventsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetSelectedEventsAsync) method. -## Get the current view appointments +## Get Current View Appointments -To retrieve the appointments present in the current view of the Scheduler, the [GetCurrentViewEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetCurrentViewEvents) public method can be used. In the following example, current view appointment collection rendered has been traced in [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event. +To retrieve the appointments currently visible in the Scheduler's active view, the [`GetCurrentViewEvents`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetCurrentViewEvents) public method can be used. In the following example, the collection of appointments rendered in the current view is logged within the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event. ```cshtml @using Syncfusion.Blazor.Schedule @@ -940,7 +983,7 @@ To retrieve the appointments present in the current view of the Scheduler, the [ public void OnDataBound(DataBoundEventArgs args) { List eventCollection = ScheduleRef.GetCurrentViewEvents(); - //You can get the current view appointment collections in the EventCollection variable + // The current view appointment collections are available in the eventCollection variable } List DataSource = new List { @@ -963,9 +1006,9 @@ To retrieve the appointments present in the current view of the Scheduler, the [ } ``` -## Get the entire appointment collections +## Get the Entire Appointment Collections -The entire collection of appointments rendered on the Scheduler can be accessed using the [GetEventsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetEventsAsync_System_Nullable_System_DateTime__System_Nullable_System_DateTime__System_Nullable_System_Boolean__) public method. In the following example, entire appointment collection rendered on the Scheduler has been traced in [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event. +The entire collection of appointments (including those not currently visible due to the active view) rendered on the Scheduler can be accessed using the [`GetEventsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetEventsAsync_System_Nullable_System_DateTime__System_Nullable_System_DateTime__System_Nullable_System_Boolean__) public method. In the following example, the entire appointment collection is logged within the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event. ```cshtml @using Syncfusion.Blazor.Schedule @@ -1012,9 +1055,9 @@ The entire collection of appointments rendered on the Scheduler can be accessed N> You can also get the specific range of appointments by passing the start and end time in the `GetEventsAsync` method. To get the block events, you can make use of the method `GetBlockEventsAsync`. -## Appointment filtering +## Appointment Filtering -The appointments can be filtered by passing the predicate value to [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Query) option in `ScheduleEventSettings`. The following code example shows how to filter and render the selected appointments alone in the Scheduler. +Appointments can be filtered by applying a predicate value to the [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Query) option within `ScheduleEventSettings`. The following code example shows how to filter and render the selected appointments alone in the Scheduler. ```cshtml @using Syncfusion.Blazor.Schedule @@ -1221,10 +1264,13 @@ The appointments can be filtered by passing the predicate value to [Query](https } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZroitDdUSYiudYP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Filtering in Blazor Scheduler](images/filter.png) -## Refresh appointments +## Refresh Appointments -If the requirement is to simply refresh the appointments instead of refreshing the entire Scheduler elements from the application end, make use of the [RefreshEventsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_RefreshEventsAsync) public method. +To refresh only the appointments displayed in the Scheduler, without re-rendering the entire Scheduler component from the application, utilize the [`RefreshEventsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_RefreshEventsAsync) public method. ```csharp ScheduleRef.RefreshEventsAsync(); diff --git a/blazor/scheduler/cell-customization.md b/blazor/scheduler/cell-customization.md index fa1a5783b2..0797887a15 100644 --- a/blazor/scheduler/cell-customization.md +++ b/blazor/scheduler/cell-customization.md @@ -9,9 +9,9 @@ documentation: ug # Cell Customizations in Blazor Scheduler Component -The cells of the Scheduler can be easily customized using the cell template. +The cells within the Scheduler component can be extensively customized using the cell template. -## Setting cell dimensions in Vertical Views +## Setting Cell Dimensions in Vertical Views The height and width of the Scheduler cells can be customized either to increase or reduce its size through the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CssClass) property, which overrides the default CSS applied on cells of vertical views. @@ -64,10 +64,11 @@ The height and width of the Scheduler cells can be customized either to increase } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLIWNXdqxtemNNH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Cell Dimensions in Vertical Views in Blazor Scheduler](images/blazor-scheduler-celldimension-verticalviews.png) -## Setting cell dimensions in Timeline Views +## Setting Cell Dimensions in Timeline Views The height and width of the Scheduler cells can be customized either to increase or reduce its size through the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CssClass) property, which overrides the default CSS applied on cells of timeline views. @@ -108,12 +109,13 @@ The height and width of the Scheduler cells can be customized either to increase } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBIiZNnKxstgmZQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Cell Dimensions in Timeline Views in Blazor Scheduler](images/blazor-scheduler-celldimension-timelineviews.png) -## Customizing cells using CellTemplate +## Customizing Cells Using CellTemplate -The [`CellTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_CellTemplate) is used to customize the cell background with specific images or appropriate text on the given date values. +The [`CellTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_CellTemplate) allows for powerful customization of the background of individual cells. This can include displaying specific images, custom text, or conditional styling based on the date value of the cell. ```cshtml @using Syncfusion.Blazor.Schedule @@ -198,12 +200,13 @@ The [`CellTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sch } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDreiXNdUHsJvbhb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Using CellTemplate in Blazor Scheduler](images/blazor-scheduler-celldimension-celltemplate.png) -## Customizing cell header in month view +## Customizing Cell Header in Month View -The month header of each date cell in the month view can be customized using the [CellHeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_CellHeaderTemplate) +The month header of each date cell in the month view can be customized using the [CellHeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_CellHeaderTemplate). ```cshtml @using Syncfusion.Blazor.Schedule @@ -239,12 +242,13 @@ The month header of each date cell in the month view can be customized using the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLoWNZdUnCPmdts?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Customizing Cell Header in Blazor Scheduler](images/blazor-scheduler-celldimension-cellheader.png) -## Customizing cells using OnRenderCell event +## Customizing Cells Using OnRenderCell Event -The cells can also be customized by using [`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event. In the [`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell), the argument [`RenderCellEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#properties) returns the [`ElementType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#Syncfusion_Blazor_Schedule_RenderCellEventArgs_ElementType) as `WorkCells` and `AllDayCells` when the cell is rendering. +Cells can also be customized programmatically by using the [`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event. In this event, the provided [`RenderCellEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#properties) expose properties such as [`ElementType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#Syncfusion_Blazor_Schedule_RenderCellEventArgs_ElementType) (e.g., `WorkCells`, `AllDayCells`), `Date`, and `CssClasses` to enable conditional styling. ```cshtml @using Syncfusion.Blazor.Schedule @@ -296,10 +300,13 @@ The cells can also be customized by using [`OnRenderCell`](https://help.syncfusi } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVyMDtRqxStKKHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the minimum and maximum date values +## Customizing the Minimum and Maximum Date Values -Providing the [`MinDate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_MinDate) and [`MaxDate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_MaxDate) property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range. +To define the minimum and maximum date range selectable and navigable within the Scheduler, the [`MinDate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_MinDate) and [`MaxDate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_MaxDate) properties are used. Dates outside this specified range will appear in a disabled state, and date navigation will be blocked beyond these limits. + +N> By default, the `MinDate` property is set to `new DateTime(1900, 1, 1)` and `MaxDate` to `new DateTime(2099, 12, 31)`. These default values can be customized as needed. ```cshtml @using Syncfusion.Blazor.Schedule @@ -325,10 +332,13 @@ Providing the [`MinDate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSCjXRURSECfLj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Customizing the Min and Max Date in Blazor Scheduler](images/min-maxdate.png) -## Customizing the weekend cells background color +## Customizing Weekend Cell Background Color -You can customize the background color of weekend cells by utilizing the [`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event by adding the [`CssClasses`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#Syncfusion_Blazor_Schedule_RenderCellEventArgs_CssClasses) and checking the [`ElementType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#Syncfusion_Blazor_Schedule_RenderCellEventArgs_ElementType) option within the event. +The background color of weekend cells can be customized using the [`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event. This event allows adding [`CssClasses`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#Syncfusion_Blazor_Schedule_RenderCellEventArgs_CssClasses) to cells based on their `Date` and [`ElementType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.RenderCellEventArgs.html#Syncfusion_Blazor_Schedule_RenderCellEventArgs_ElementType). ```cshtml @using Syncfusion.Blazor.Schedule @@ -386,6 +396,9 @@ You can customize the background color of weekend cells by utilizing the [`OnRen } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLoCDXdURmnmCBA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](images/weekend-color.png) And, the background color for weekend cells in the Month view through the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CssClass) property, which overrides the default CSS applied on cells. @@ -397,8 +410,6 @@ And, the background color for weekend cells in the Month view through the [`CssC ``` -## How to disable multiple cell and row selection in Schedule - -By default, the [AllowMultiCellSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiCellSelection) and [AllowMultiRowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiRowSelection) properties of the Schedule are set to true that allows user to select multiple cells and rows. If you want disable the multiple cell/row selection, you can disable the [AllowMultiCellSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiCellSelection) and [AllowMultiRowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiRowSelection) properties. +## How to Disable Multiple Cell and Row Selection in Schedule -N> By default, the `MinDate` property value is set to new DateTime(1900, 1, 1) and `MaxDate` property value is set to new DateTime(2099, 12, 31). The user can also set the customized `MinDate` and `MaxDate` property values. \ No newline at end of file +By default, the [`AllowMultiCellSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiCellSelection) and [`AllowMultiRowSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiRowSelection) properties of the Scheduler are set to `true`, allowing users to select multiple cells and rows. To disable this behavior, set both properties to `false`. diff --git a/blazor/scheduler/clipboard.md b/blazor/scheduler/clipboard.md index f43f6daeae..1bcdbbafc0 100644 --- a/blazor/scheduler/clipboard.md +++ b/blazor/scheduler/clipboard.md @@ -9,17 +9,17 @@ documentation: ug # Clipboard in Blazor Scheduler Component -The Clipboard functionality in the Syncfusion® Scheduler enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially beneficial for those managing multiple appointments, as it eliminates the need for repetitive data entry and allows users to quickly adjust their schedules without hassle. +The Clipboard functionality in the Syncfusion® Scheduler enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially beneficial for managing multiple appointments, as it streamlines repetitive tasks and allows for quick adjustments to schedules. -To activate the clipboard feature in the scheduler, simply set the [`AllowClipboard`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowKeyboardInteraction) property to **true**. +To activate the clipboard feature in the Scheduler, set the [`AllowClipboard`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowClipboard) property to `true`. -N> The [`AllowKeyboardInteraction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowKeyboardInteraction) property must be true for proper functionality of the clipboard feature. +N> The [`AllowKeyboardInteraction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowKeyboardInteraction) property must also be set to `true` for the clipboard feature to function correctly, as it relies on keyboard shortcuts. -## Cut, copy and paste using keyboard +## Cut, Copy, and Paste Using Keyboard -The Syncfusion® Scheduler supports keyboard shortcuts to streamline the process of managing appointments. +The Syncfusion® Scheduler supports standard keyboard shortcuts to streamline the process of managing appointments. -These keyboard shortcuts enable users to efficiently manage their schedules: +These keyboard shortcuts enable efficient schedule management: | Operation | Shortcut | Description | |-----------|----------|------------------------------------------------------------------| @@ -111,9 +111,9 @@ To use these shortcuts, simply click on the appointment and press **Ctrl+C** to N> For Mac users, use **Cmd** instead of **Ctrl** for copy, cut, and paste operations. -## Cut, copy, and paste using context menu +## Cut, Copy, and Paste Using Context Menu -You can programmatically manage appointments by using the public methods **cut**, **copy**, and **paste**. These methods allow you to perform the same actions as the context menu or external buttons. +Appointments can be programmatically managed using the public methods `CopyAsync`, `CutAsync`, and `PasteAsync`. These methods allow developers to trigger the same clipboard actions as keyboard shortcuts or context menu options, providing more control over the appointment management process. Utilize these public methods to manage appointments programmatically in Syncfusion® Schedule: @@ -123,7 +123,7 @@ Utilize these public methods to manage appointments programmatically in Syncfusi | `CutAsync` | None | Remove the selected appointment from its current slot for moving. | | `PasteAsync` | targetElement (Scheduler's work-cell) | Insert the copied or cut appointment into the specified time slot. | -By using these methods, you can programmatically cut, copy, and paste appointments in the scheduler, providing more control over the appointment management process. +By using these methods within event handlers (e.g., from a custom context menu), precise control over clipboard operations is achieved. ```cshtml @using Syncfusion.Blazor.Schedule @@ -289,9 +289,9 @@ By using these methods, you can programmatically cut, copy, and paste appointmen {% previewsample "https://blazorplayground.syncfusion.com/embed/rNVojqVGhZgDmVrp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5 %} -## Modifying content before pasting +## Modifying Content Before Pasting -You can modify the content of an appointment before pasting it by using `Paste` event accessing the appointment details and making necessary changes. +The content of an appointment can be modified before it is pasted by utilizing the `Paste` event. This event provides access to the appointment details, allowing for necessary changes. The following example demonstrates how to seamlessly copy and paste content from a grid to a scheduler. To do this, follow these steps: diff --git a/blazor/scheduler/context-menu.md b/blazor/scheduler/context-menu.md index 3ee9352464..372fe4d097 100644 --- a/blazor/scheduler/context-menu.md +++ b/blazor/scheduler/context-menu.md @@ -9,13 +9,17 @@ documentation: ug # Context Menu in Blazor Scheduler Component -The context menu can be displayed on work cells, resource cells and appointments of Scheduler by making use of the [`ContextMenu`](https://blazor.syncfusion.com/documentation/context-menu/getting-started) control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as `Scheduler` and the target element is got by using [GetElementInfoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetElementInfoAsync_System_Int32_System_Int32_) public method in Blazor. +A context menu can be integrated with the Scheduler to display context-sensitive options on work cells, resource cells, and appointments. This functionality is achieved manually using Syncfusion's [`ContextMenu`](https://blazor.syncfusion.com/documentation/context-menu/getting-started) control. -On Scheduler cells, the menu items can be displayed such as `New Event`, `New Recurring Event` and `Today` option. For appointments, its related options can be displayed such as `Edit Event` and `Delete Event`. For resource cells, the related resource cell information can be displayed. The default event window can be opened for appointment creation and editing using the [OpenEditorAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_OpenEditorAsync__0_Syncfusion_Blazor_Schedule_CurrentAction_) method of Scheduler. +The example demonstrates adding a Context Menu from the application side, setting its target to the Scheduler, and using the Scheduler's [`GetElementInfoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_GetElementInfoAsync_System_Int32_System_Int32_) public method to determine the specific element (cell, event, resource header) that was right-clicked. -The deletion of appointments can be done by using the [DeleteEventAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__1___0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) public method. Also, the [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property can be used to navigate between different dates. +* **On Scheduler cells:** Menu items such as `New Event`, `New Recurring Event`, and `Today` options can be displayed. +* **On Appointments:** Related options like `Edit Event` and `Delete Event` can be shown. +* **On Resource Cells:** The relevant resource cell information can be displayed or actions related to the resource can be offered. -N> You can also display custom menu options on Scheduler cells and appointments. Context menu will open on tap-hold in responsive mode. +The default event editor window can be opened for appointment creation and editing using the [`OpenEditorAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_OpenEditorAsync__0_Syncfusion_Blazor_Schedule_CurrentAction__) method. Appointment deletion is handled by the [`DeleteEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__1___0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) public method. The [`SelectedDate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property can be used to navigate between different dates. + +N> Custom menu options can also be displayed on Scheduler cells and appointments. In responsive mode, the context menu opens on a tap-hold gesture. ```cshtml @using Syncfusion.Blazor.Schedule @@ -196,5 +200,6 @@ N> You can also display custom menu options on Scheduler cells and appointments. } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthesNXHAvXJRJTH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Context Menu in Blazor Scheduler](images/blazor-scheduler-contextmenu.png) \ No newline at end of file diff --git a/blazor/scheduler/crud-actions.md b/blazor/scheduler/crud-actions.md index fd985922b4..39189bf4e7 100644 --- a/blazor/scheduler/crud-actions.md +++ b/blazor/scheduler/crud-actions.md @@ -1,32 +1,33 @@ --- layout: post -title: CRUD actions in Blazor Scheduler Component | Syncfusion +title: CRUD Actions in Blazor Scheduler Component | Syncfusion description: Learn here all about possible methods available on Syncfusion Blazor Scheduler component to perform CRUD actions on the events. platform: Blazor control: Scheduler documentation: ug --- -# CRUD actions in Blazor Scheduler Component +# CRUD Actions in Blazor Scheduler Component -Events, a.k.a. Appointments, play an important role in Scheduler with which the users mostly interact. You can easily manipulate (add/edit/delete) the desired appointments as and when required either using the editor window or through the drag and resize action. +Appointments, also known as events, are central to user interaction within the Scheduler. The component provides intuitive ways to manipulate these appointments (add, edit, delete) either through its interactive editor, quick popups, inline editing, or via drag-and-resize actions. ## Add -Any kind of appointments such as normal, all-day, spanned or recurring events can be easily added on Scheduler using any one of the following ways. +Appointments of any type—normal, all-day, spanned, or recurring events—can be easily added to the Scheduler using one of the following methods: -* [Creation using editor window](#creation-using-editor-window) -* [Creation using AddEventAsync method](#creation-using-addeventasync-method) +* [Creation using Editor Window](#creation-using-editor-window) +* [Creation using AddEventAsync Method](#creation-using-addeventasync-method) +* [Inline Creation](#inline-creation) -### Creation using editor window +### Creation using Editor Window -The default editor window opens when you double click on the Scheduler cells. It provides with event related options such as Subject, Location, Start and End time, All-day, Timezone, Description and other recurrence options. With these available fields, you can choose to provide detailed information to the events. Once the fields are filled with proper values, enter the `Save` button to add an event. +The default editor window opens when a user double-clicks on an empty cell in the Scheduler. This comprehensive editor provides various event-related options such as Subject, Location, Start and End time, All-day status, Timezone, Description, and recurrence options. Users can provide detailed information for the event through these fields. After filling in the appropriate values, clicking the `Save` button adds the event. -In case, if you want to simply provide the Subject alone for appointments, just single click on the required cells which will open the quick popup expecting you to enter subject alone and save it. You can also select multiple cells and press `Enter` key to open the quick popup for selected time range and save the appointment for that time range. +Alternatively, a single click on a Scheduler cell opens a quick popup, allowing the user to simply enter a subject and save the appointment. For a selected time range (e.g., multiple cells selected by dragging), pressing the Enter key can also open this quick popup to save an appointment for that duration. -### Creation using AddEventAsync method +### Creation using AddEventAsync Method -The appointments can be created dynamically by using [`AddEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AddEventAsync__0_) method. +Appointments can be dynamically created and added to the Scheduler programmatically using the [`AddEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AddEventAsync__0_) method. ```cshtml @using Syncfusion.Blazor.Schedule @@ -78,10 +79,13 @@ The appointments can be created dynamically by using [`AddEventAsync`](https://h } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLSsNXHgvMUdWcA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Inline creation +![Blazor Scheduler](images/add-appointment.png) -Another easier way to create the appointments is enabling the [`AllowInline`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowInline) property. By single clicking on the scheduler cells or pressing `enter` key on selected cells, the appointment like textbox will be displayed in which you can enter the Subject of the appointment. Pressing enter key or clicking out of the text box will create the appointment in the scheduler. +### Inline Creation + +Another convenient way to create appointments is by enabling the [`AllowInline`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowInline) property. This allows users to single-click on Scheduler cells or press the Enter key on selected cells to display an appointment-like textbox. Users can then type the event's `Subject` directly. Pressing Enter or clicking outside the textbox will save the new appointment. ```cshtml @using Syncfusion.Blazor.Schedule @@ -118,10 +122,11 @@ Another easier way to create the appointments is enabling the [`AllowInline`](ht } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthosXXnAbVuftBK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Inserting events into database at server-side +### Inserting Events into a Database at Server-Side -While adding the normal or recurring events to the Scheduler, `insert` action takes place and the following code example describes how to add a new event into database at server side. +When adding normal or recurring events to the Scheduler, an `insert` action is triggered. The following code example illustrates how to handle a new event persisting to a database on the server side. ```sh if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments @@ -150,11 +155,11 @@ if (param.action == "insert" || (param.action == "batch" && param.added != null) ![Adding Events in Blazor Scheduler](images/blazor-scheduler-add-events.png) -### Restricting add action based on specific criteria +### Restricting Add Action Based on Specific Criteria In the following example, the specific fields of Scheduler editor window such as Subject and Location are made to undergo validation such that if it is left as blank, then the default `required` validation message will be displayed, while clicking on a save button. -Additionally, the regex condition has been added to the Location field, so that if any special characters are typed into it, then the custom validation message will be displayed. +Additionally, a regular expression (regex) condition can be applied to the `Location` field to prevent special characters, displaying a custom validation message if violated. ```cshtml @using Syncfusion.Blazor.Schedule @@ -204,8 +209,11 @@ Additionally, the regex condition has been added to the Location field, so that } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLSMjNxqlqPOxhL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](images/validation.png) -You can also dynamically prevent the creation of appointments on Scheduler. For example, say if you want to decline the creation of appointments on weekend days, you can check for its appropriate condition within the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event. +The creation of appointments can also be dynamically prevented based on runtime conditions. For example, to prevent appointment creation on weekend days, the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event can be used to check the start date of the proposed appointment. ```cshtml @using Syncfusion.Blazor.Schedule @@ -257,25 +265,27 @@ You can also dynamically prevent the creation of appointments on Scheduler. For } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhSsDXdqbzuctqm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Edit -The same way the appointments such as normal, all-day, spanned or recurring events are created, it can be easily edited using any of the following ways. +Appointments (normal, all-day, spanned, or recurring events) can be easily edited using any of the following methods: -* [Update using editor window](#update-using-editor-window) -* [Update using SaveEventAsync method](#update-using-saveeventasync-method) +* [Update using Editor Window](#update-using-editor-window) +* [Update using `SaveEventAsync` Method](#update-using-saveeventasync-method) +* [Inline Editing](#inline-editing) -### Update using editor window +### Update using Editor Window -The default editor window filled with appointment details can be opened by double clicking on the required events. It gets pre-filled with event options such as Subject, Location, Start and End time, All-day, timezone, description and other recurrence options, from which you can edit the desired field values and, then enter the `Save` button to update it. +The default editor window, pre-filled with appointment details, can be opened by double-clicking on the desired event. This editor provides event options such as Subject, Location, Start and End time, All-day status, Timezone, Description, and recurrence options. Users can edit the desired field values and then click the `Save` button to update the event. -N> You can also single click on appointments, which opens the quick info popup with edit and delete options. Clicking on the `Edit` option will open the default editor filled with event details and `Delete` option will prompt for delete confirmation. +N> A single click on an appointment opens a quick info popup with "Edit" and "Delete" options. Clicking "Edit" opens the default editor pre-filled with event details. "Delete" prompts for delete confirmation. -### Update using SaveEventAsync method +### Update using SaveEventAsync Method -The appointments can be edited and updated manually using the [`SaveEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SaveEventAsync__0_Syncfusion_Blazor_Schedule_CurrentAction__0_) method. +Appointments can be programmatically edited and updated using the [`SaveEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SaveEventAsync__0_Syncfusion_Blazor_Schedule_CurrentAction__0_) method. -Here, an event with ID `1` is edited and its subject is changed with a new text. When the modified data object is passed onto the [`SaveEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SaveEventAsync__0_Syncfusion_Blazor_Schedule_CurrentAction__0_) method, the changes gets reflected onto the original event. The `Id` field is mandatory in this edit process, where the modified event object should hold the valid `Id` value that exists in the Scheduler data source. +In the following example, an event with a specific `Id` (e.g., `1`) is edited, and its subject is changed with new text. When the modified data object is passed to the `SaveEventAsync` method, the changes are reflected in the original event. The `Id` field is mandatory in this process, as the modified event object must hold a valid `Id` value that exists in the Scheduler's data source. ```cshtml @using Syncfusion.Blazor.Schedule @@ -327,10 +337,13 @@ Here, an event with ID `1` is edited and its subject is changed with a new text. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVeMZZdgPeRVAmz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Scheduler](images/edit-event.png) -### Inline editing +### Inline Editing -Another easier way to edit the appointments is enabling the [`AllowInline`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowInline) property. By single clicking on the appointments, you can edit the Subject of the appointment. Pressing enter key or clicking out of the appointment will edit the existing appointment. +Another convenient way to edit appointments is by enabling the [`AllowInline`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowInline) property. This allows users to single-click on an appointment to directly edit its `Subject`. Pressing Enter or clicking outside the appointment will update the existing appointment. ```cshtml @using Syncfusion.Blazor.Schedule @@ -367,8 +380,9 @@ Another easier way to edit the appointments is enabling the [`AllowInline`](http } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLSiZZRgbHIWEOC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Updating events in database at server-side +### Updating Events in a Database at Server-Side While editing the normal events in the Scheduler, `update` action takes place and the following code example describes how to update event into database at server side. @@ -398,22 +412,23 @@ if (param.action == "update" || (param.action == "batch" && param.changed != nul ![Updating Blazor Scheduler Events](images/blazor-scheduler-updating-events.png) -### How to edit a single occurrence or entire series and update it in database at server-side +### How to Edit a Single Occurrence or Entire Series and Update it in a Database at Server-Side -The recurring appointments can be edited in either of the following two ways. +Recurring appointments can be edited in two distinct ways: * Single occurrence * Entire series -**Editing single occurrence** - When a recurring event is double clicked, a popup prompts to choose either to edit the single event or entire series. From this, if you choose to select **EDIT EVENT** option, a single occurrence of the recurring appointment alone will be edited. The following process takes place while editing a single occurrence, - -* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the [`RecurrenceID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldRecurrenceId.html) field will be added to it, that holds the `id` value of the parent recurring event. Also, a new `Id` will be generated for this event in the dataSource. - -* The parent recurring event needs to be updated with appropriate [`RecurrenceException`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldRecurrenceException.html) field to hold the edited occurrence appointment's date collection. +* **Editing a Single Occurrence:** When a recurring event is double-clicked, a popup prompts the user to choose between editing the single event or the entire series. Selecting the "EDIT EVENT" option will edit only that specific occurrence of the recurring appointment. + + This process involves: + * A new event being created from the parent event's data and added to the Scheduler's data source. Its fields are overwritten with the newly modified data. + * A [`RecurrenceID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldRecurrenceId.html) field is added to the new event, holding the `Id` value of the parent recurring event. A new `Id` is also generated for this specific occurrence. + * The parent recurring event is updated with an appropriate [`RecurrenceException`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldRecurrenceException.html) field to store the date of the edited occurrence. -Therefore, when a single occurrence is edited from a recurring event, the batch action takes place by allowing both the `Add` and `Edit` action requests to take place together. + Therefore, editing a single occurrence from a recurring event typically involves a batch action, encompassing both `Add` (for the new occurrence) and `Edit` (for the parent's `RecurrenceException`) actions. -N> In case, if you edit an existing edited occurrence of a recurring event, only those edited occurrence which present in the database as an individual event object will get updated. In this case, `update` action alone takes place on the edited occurrence object on the database. + N> If an existing edited occurrence of a recurring event is modified, only that individual event object in the database is updated. In this case, only an `update` action occurs on the edited occurrence. ```sh if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments @@ -461,9 +476,9 @@ if (param.action == "update" || (param.action == "batch" && param.changed != nul } ``` -**Editing entire series** - When an option **EDIT SERIES** is selected from the popup that opens on double clicking the recurring event, the whole recurring series will be updated with the newly provided value. When this option is chosen explicitly, if a parent event holds any edited occurrences - then all its child occurrences will be removed from the dataSource and simply the single parent data will be updated. - -This action of editing entire series also leads to the batch process, as both the `Delete` and `Edit` action takes place together. +* **Editing Entire Series:** When the "EDIT SERIES" option is selected from the popup (after double-clicking a recurring event), the entire recurring series is updated with the new values. If the parent event has any previously edited occurrences, those child occurrences will be removed from the data source, and only the single parent data will be updated. + + Editing an entire series also typically involves a batch process, combining both `Delete` (for existing edited occurrences) and `Edit` (for the master series event) actions. ```sh if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment @@ -507,11 +522,11 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul } ``` -N> To know more about handling recurrence exceptions, refer the [Adding exceptions](https://blazor.syncfusion.com/documentation/scheduler/recurring-events#adding-exceptions) topic. +N> For more details on handling recurrence exceptions, refer to the [Adding exceptions](https://blazor.syncfusion.com/documentation/scheduler/recurring-events#adding-exceptions) topic. -### Restricting edit action based on specific criteria +### Restricting Edit Action Based on Specific Criteria -You can also dynamically prevent the editing of appointments on Scheduler. For example, say if you want to decline the updating of appointments on non-working hours, you can check for its appropriate condition within the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event. +The editing of appointments can be dynamically prevented based on runtime conditions. For example, to prevent appointments from being updated outside of defined working hours, the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event can be used to check the proposed new time range. ```cshtml @using Syncfusion.Blazor.Schedule @@ -578,27 +593,30 @@ You can also dynamically prevent the editing of appointments on Scheduler. For e } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLyiDtdKlchXNgv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Delete The appointments can be deleted in either of the following ways, -* Selecting an appointment and clicking the delete icon from the quick popup that opens. -* Selecting an appointment and pressing `Delete` key. -* Selecting multiple appointments by tap holding an event and then continuously single clicking on other consecutive events and then clicking the `Delete` key. -* Double clicking on an event which opens the default event editor pre-filled with event details, and then choosing `Delete` button in it. +* Selecting an appointment and clicking the delete icon from the quick popup. +* Selecting an appointment and pressing the Delete key. +* Selecting multiple appointments (e.g., by holding Ctrl and clicking) and then pressing the Delete key. +* Double-clicking an event to open the default event editor, then choosing the `Delete` button within the editor. + +For most of these actions, a pop-up with a delete confirmation message will be displayed, prompting the user to confirm the deletion. -While performing all these above mentioned actions, a pop-up with a delete confirmation message will be displayed prompting either to proceed with deleting an appointment. +### Deletion Using Editor Window -### Deletion using editor window +When an event is double-clicked, the default editor window opens. This window includes a `Delete` button, typically at the bottom-left, which allows for the deletion of that specific appointment. When an appointment is deleted through this editor, the delete confirmation alert is usually bypassed, and the event is deleted immediately. -When you double click an event, the default editor window will be opened which includes a `Delete` button at the bottom left position which allows to delete that particular appointment. When deleting an appointment through this editor window, the delete alert confirmation will not be asked and the event will be deleted immediately. +### Deletion Using DeleteEventAsync Method -### Deletion using DeleteEventAsync method +Appointments can be programmatically removed using the [`DeleteEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) method. This method supports deleting both normal and recurring events. -The appointments can be removed manually using the [`DeleteEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) method. The following code examples shows how to edit the normal and recurring events. +#### Deleting a Normal Event -**Normal event** - You can delete the normal appointments of Scheduler by simply passing its `Id` value or the entire event object collection to the [`DeleteEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) method. +A normal appointment can be deleted from the Scheduler by simply passing its `Id` value or the entire event object collection to the [`DeleteEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) method. ```cshtml @using Syncfusion.Blazor.Schedule @@ -643,8 +661,11 @@ The appointments can be removed manually using the [`DeleteEventAsync`](https:// } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLIWjZdKvmmBHUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +#### Deleting a Recurring Event -**Recurring Event** - The recurring events can be removed as an entire series or simply removing single occurrence by using the [`DeleteEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) method which takes in either the `DeleteSeries` or `DeleteOccurrence` parameters. +Recurring events can be removed either as an entire series or by deleting a single occurrence. The [`DeleteEventAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DeleteEventAsync__0_System_Nullable_Syncfusion_Blazor_Schedule_CurrentAction__) method supports this by accepting `CurrentAction.DeleteSeries` or `CurrentAction.DeleteOccurrence` parameters. ```cshtml @using Syncfusion.Blazor.Schedule @@ -700,8 +721,9 @@ The appointments can be removed manually using the [`DeleteEventAsync`](https:// } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhyWXZHqlvhAoqQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Removing events from database at server-side +### Removing Events from a Database at Server-Side While deleting the event from the Scheduler, `remove` action takes place and the following code example describes how to delete event from database at server side. @@ -728,21 +750,22 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul ![Removing Blazor Scheduler Event](images/blazor-scheduler-remove-events.png) -### How to delete a single occurrence or entire series from Scheduler and update it in database at server-side +### How to Delete a Single Occurrence or Entire Series from Scheduler and Update it in a Database at Server-Side The recurring events can be deleted in either of the following two ways. * Single occurrence * Entire series -**Single occurrence** - When you attempt to delete the recurring events, a popup prompts you to choose either to delete the single event or entire series. From this, if you choose to select **DELETE EVENT** option, a single occurrence of the recurring appointment alone will be removed. The following process takes place while removing a single occurrence, - -* The selected occurrence will be deleted from the Scheduler user interface. -* In code, the parent recurring event object will be updated with appropriate [`RecurrenceException`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldRecurrenceException.html) field, to hold the deleted occurrence appointment's date collection. - -Therefore, when a single occurrence is deleted from a recurring event, the `update` action takes place on the parent recurring event as shown in the following code example. +**Single occurrence** - When attempting to delete a recurring event, a popup prompts users to choose between deleting the single event or the entire series. Selecting the "DELETE EVENT" option removes only that specific occurrence from the Scheduler UI. + + This process involves: + * The selected occurrence being removed from the Scheduler user interface. + * The parent recurring event object being updated with an appropriate [`RecurrenceException`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.FieldRecurrenceException.html) field, which stores the date of the deleted occurrence. -N> In case, if you delete an existing edited occurrence of a recurring event, only those edited occurrence which present in the database as an individual event object will get removed. In this case, `delete` action takes place instead of `update` action and the parent recurring event object remains same with no changes. + Therefore, deleting a single occurrence from a recurring event results in an `update` action on the parent recurring event in the database. + +N> If an existing edited occurrence of a recurring event is deleted, only that individual edited occurrence (present in the database as a separate event object) is removed. In this case, a `delete` action occurs instead of an `update` action on the parent, and the parent recurring event object remains unchanged. ```sh if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment @@ -768,7 +791,7 @@ if (param.action == "update" || (param.action == "batch" && param.changed != nul } ``` -**Entire series** - When you select an option **DELETE SERIES** from the popup, the whole recurring series will be deleted. When this option is chosen explicitly, if a parent event holds any edited occurrences - then all its child occurrences which are maintained as separate event objects will also be removed from the dataSource. This action of deleting entire series leads to `remove` action and removes one or more event objects at the same time. +**Entire series** When the "DELETE SERIES" option is selected from the popup, the entire recurring series is deleted. If the parent event has any previously edited occurrences (maintained as separate event objects), those child occurrences will also be removed from the data source. This action leads to a `remove` operation, deleting one or more event objects simultaneously. ```sh if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment @@ -791,11 +814,11 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul } ``` -## Drag and drop +## Drag and Drop -When you drag and drop a normal event on the Scheduler, the event editing action takes place. When a recurring event is drag and dropped on a desired time range, the batch action explained in `Editing a single occurrence` process will take place - thus allowing both the `Add` and `Edit` action to take place together. +When a normal event is dragged and dropped in the Scheduler, an event editing action is performed. If a recurring event instance is dragged and dropped to a new time range, a batch action occurs, similar to the "Editing a single occurrence" process. This will involve both an `Add` (for the new occurrence) and an `Edit` (for the parent's `RecurrenceException`) action. -N> By default, when you drag a recurring instance, only the occurrence of the event gets edited and not a whole series. +N> By default, dragging a recurring instance only edits that specific occurrence and does not affect the entire series. ```cshtml @using Syncfusion.Blazor.Schedule @@ -834,9 +857,9 @@ N> By default, when you drag a recurring instance, only the occurrence of the ev ## Resize -When you resize a normal event on the Scheduler, the event editing action takes place. When a recurring event is resized to a new desired time, the batch action explained in `Editing a single occurrence` process will takes place - thus allowing both the `Add` and `Edit` action to take place together. +When a normal event is resized in the Scheduler, an event editing action is performed. If a recurring event instance is resized to a new duration, a batch action occurs, similar to the "Editing a single occurrence" process. This will involve both an `Add` (for the new occurrence) and an `Edit` (for the parent's `RecurrenceException`) action. -N> By default, when you resize a recurring instance, only the occurrence of the event gets edited and not a whole series. +N> By default, resizing a recurring instance only edits that specific occurrence and does not affect the entire series. ```cshtml @using Syncfusion.Blazor.Schedule diff --git a/blazor/scheduler/data-binding.md b/blazor/scheduler/data-binding.md index 342a0243e7..61219b9c57 100644 --- a/blazor/scheduler/data-binding.md +++ b/blazor/scheduler/data-binding.md @@ -9,20 +9,20 @@ documentation: ug # Data Binding in Blazor Scheduler Component -The Scheduler uses [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html), which supports both RESTful data service binding and datasource collections to bind data to the Scheduler. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) property of Scheduler can be assigned either with the instance of `DataManager` or list of datasource collection. +The Scheduler component utilizes [`DataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) to handle data binding, supporting both RESTful data service binding and direct data source collections. The [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) property within `ScheduleEventSettings` can be assigned either an instance of `DataManager` or a list of data source collections. -It supports the following kinds of data binding methods: -* List binding -* Remote data +The Scheduler supports the following primary methods for data binding: +* List Binding +* Remote Data Binding Please take a moment to watch this video to learn about data binding in the Blazor Scheduler. {% youtube "youtube:https://www.youtube.com/watch?v=EwfxPrqxma8"%} -## List binding +## List Binding -To bind list binding to the Scheduler, you can simply assign a list of datasource collections as IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) option of the scheduler within the ScheduleEventSettings tag. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. +To bind data from a local list to the Scheduler, simply assign a collection of data objects (implementing `IEnumerable`) to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) property within the `` tag. The list data source can also be provided as an instance of [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by directly using the `` component. ```cshtml @using Syncfusion.Blazor.Schedule @@ -55,18 +55,20 @@ To bind list binding to the Scheduler, you can simply assign a list of datasourc } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVyMXtdUlEzkzNP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![List data in Blazor Scheduler](images/list-data.png) + N> By default, `DataManager` uses `BlazorAdaptor` for binding local data. -> You can also bind different field names to the default event fields as well as include additional `custom fields` to the event object collection which can be referred [here](./appointments#event-fields). +> Different field names can be bound to the default event fields, and additional `custom fields` to the event object collection which can be referred [here](./appointments#event-fields). -### ExpandoObject binding +### ExpandoObject Binding -The Scheduler is a generic component which is strongly bound to a model type, but there may be cases where the model type is unknown during compile or runtime. In these scenarios, you can use **ExpandoObject** binding to bind data to the Scheduler as a list of dynamic objects. +The Scheduler is a generic component that is strongly bound to a model type. However, for scenarios where the model type is unknown at compile-time or runtime, **ExpandoObject** binding can be used. This allows data to be bound as a list of dynamic objects. -**ExpandoObject** implements the IDictionary interface, which means you can add properties and values to the object like you would with a dictionary.**ExpandoObject** binding provides a flexible way to bind data to the Scheduler component without the need for a predefined class or data structure. This can be particularly useful in scenarios where you have data sources with varying structures, or when you need to bind to data sources that are not known at compile-time. +**ExpandoObject** implements the `IDictionary` interface, enabling the addition of properties and values dynamically at runtime, similar to a dictionary. This provides a flexible way to bind data without requiring a predefined class or strict data structure, particularly useful for data sources with varying structures. -**ExpandoObject** can be bound to the `DataSource` option of the scheduler within the `ScheduleEventSettings` component. Scheduler can also perform all kinds of supported data operations and editing in ExpandoObject. -To bind data to the Scheduler using ExpandoObject, you can create a list of ExpandoObjects and set it as the DataSource property of the Scheduler's `ScheduleEventSettings` component. +To bind data using `ExpandoObject`, create a list of `ExpandoObject` instances and set it as the `DataSource` property of the Scheduler's `ScheduleEventSettings` component. The Scheduler supports all data operations and editing functionalities with `ExpandoObject` binding. ```csharp @using System.Dynamic @@ -104,14 +106,15 @@ To bind data to the Scheduler using ExpandoObject, you can create a list of Expa } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIMjjxguCLKwbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### DynamicObject Binding -**DynamicObject** binding is another approach for binding data to the Scheduler when the model type is unknown at compile time. In this approach, you use the dynamic keyword to define variables that can hold objects of any type, including those with dynamically added properties. +**DynamicObject** binding offers another method for data binding when the model type is unknown at compile time. This approach leverages the `dynamic` keyword, allowing variables to hold objects that can dynamically add or manage properties at runtime. -To bind data to the Scheduler using **DynamicObject** binding, you can create a list of dynamic objects and set it as the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) property of the Scheduler's `ScheduleEventSettings` component. You can then use the Scheduler's built-in data operations and editing features to work with the data. +To bind data using `DynamicObject`, create a list of custom `DynamicObject` instances and set it as the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) property of the Scheduler's `ScheduleEventSettings` component. This enables the use of the Scheduler's built-in data operations and editing features with dynamically behaving objects. -**DynamicObject** implements the `IDynamicMetaObjectProvider` interface, which means you can override member access operations like `GetMember` and `SetMember` to provide your own custom logic.**DynamicObject** binding is that it allows you to create objects with dynamic behavior, which can be useful in scenarios where you need to work with objects whose behavior is not known at compile-time. +**DynamicObject** implements the `IDynamicMetaObjectProvider` interface, which allows overriding member access operations like `GetMember` and `SetMember` for custom logic. This is particularly useful for scenarios where object behavior is determined at runtime. N> The [`GetDynamicMemberNames`](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject.getdynamicmembernames?view=net-7.0) method of DynamicObject class must be overridden and return the property names to perform data operation and editing while using DynamicObject. @@ -170,10 +173,11 @@ N> The [`GetDynamicMemberNames`](https://learn.microsoft.com/en-us/dotnet/api/sy } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLIstjRqEMwIAdI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## ObservableCollection -This [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-7.0) (dynamic data collection) provides notifications when items are added, removed and moved. The implement [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-7.0) notifies when dynamic changes of add,remove, move and clear the collection. The implement [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-7.0) notifies when property value has changed in client side. +Utilizing [`ObservableCollection`](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-7.0) (a dynamic data collection) provides notifications when items are added, removed, or moved. This collection implements [`INotifyCollectionChanged`](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-7.0), informing the Scheduler of dynamic changes such as additions, removals, moves, or clearing of items. Furthermore, the `AppointmentData` class implements [`INotifyPropertyChanged`](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-7.0), which notifies the UI when a property value (e.g., `Subject`) has changed on the client side. Here, AppointmentData class implements the interface of **INotifyPropertyChanged** and it raises the event when Subject property value was changed. @@ -270,11 +274,14 @@ Here, AppointmentData class implements the interface of **INotifyPropertyChanged } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLIMjXdAOVvBGfh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Scheduler](images/observablecollectiondata.png) +## Custom Binding -## Custom binding +It is possible to create a custom `DataAdaptor` by extending the built-in `DataAdaptor` class. This allows for binding data from a custom service and performing CRUD operations using the methods of the [DataAdaptor](https://blazor.syncfusion.com/documentation/data/custom-binding) abstract class. -It is possible to create your own `CustomAdaptor` by extending the built-in available adaptors. The following example demonstrates the custom adaptor usage and how to bind the data with custom service and the CRUD operations for custom bounded data is performed using the methods of [DataAdaptor](https://blazor.syncfusion.com/documentation/data/custom-binding) abstract class. +The following example demonstrates the usage of a custom adaptor to bind data with a custom service. The `CustomAdaptor` overrides methods like `ReadAsync`, `InsertAsync`, `UpdateAsync`, and `RemoveAsync` to interact with a local `List`. ```cshtml @using Syncfusion.Blazor @@ -419,15 +426,16 @@ It is possible to create your own `CustomAdaptor` by extending the built-in avai N> You can find the complete procedures to perform CRUD actions with the Syncfusion® Blazor Scheduler using CustomAdaptor [here](https://github.com/SyncfusionExamples/Blazor-Scheduler-CRUD-using-custom-adaptor). -## Remote data +## Remote Data Binding -Any kind of remote data services can be bound to the Scheduler. To do so, provide the service URL to the `Url` option of `SfDataManager` within `ScheduleEventSettings` tag. +Any type of remote data services can be bound to the Scheduler. To achieve this, provide the service URL to the `Url` option of `SfDataManager` within the `` tag. -### Binding with OData services +### Binding with OData Services [OData](https://www.odata.org/documentation/odata-version-3-0/) ((Open Data Protocol)) is a widely used protocol for creating and consuming RESTful APIs over various transport protocols such as HTTP, HTTPS, and others. It offers a standardized way for creating, retrieving, updating, and deleting data across various platforms and devices. OData provides a uniform way for interacting with data, which simplifies the task of developing and consuming RESTful APIs. -You can retrieve data from OData service using the `SfDataManager`. Refer to the following code example for remote Data binding using OData service. +Data can be retrieved from an OData service using `SfDataManager`. Refer to the following code example for remote data binding using an OData service. + ```cshtml @using Syncfusion.Blazor @@ -445,7 +453,7 @@ You can retrieve data from OData service using the `SfDataManager`. Refer to the } ``` -### Binding with OData v4 services +### Binding with OData v4 Services [ODataV4](https://www.odata.org/documentation/) is the latest version of the OData protocol, which offers more features and better performance than its predecessors. It provides support for advanced query options, data validation, and data shaping. The ODataV4 protocol is based on the JSON format, which makes it more lightweight and easier to use. @@ -467,13 +475,13 @@ Refer to the following code example to retrieve the data from ODataV4 service us } ``` -N> You can find the working sample [here](https://github.com/SyncfusionExamples/Blazor-Scheduler-CRUD-using-ODATA-adaptor). +N> A working sample demonstrating integration with OData can be found [here](https://github.com/SyncfusionExamples/Blazor-Scheduler-CRUD-using-ODATA-adaptor). -### Filter events using the in-built query +### Filtering Events Using the In-built Query -To enable server-side filtering operations based on predetermined conditions, the [`IncludeFiltersInQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_IncludeFiltersInQuery) API can be set to true, this allows the filter query to be constructed using the start date, end date, and recurrence rule which in turn enables the request to be filtered accordingly. +To enable server-side filtering operations based on predetermined conditions, the [`IncludeFiltersInQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_IncludeFiltersInQuery) API can be set to `true`. This constructs a filter query using the start date, end date, and recurrence rule, allowing the request to be filtered accordingly. -This method greatly improves the component's performance by reducing the data that needs to be transferred to the client side. As a result, the component's efficiency and responsiveness are significantly enhanced, resulting in a better user experience. However, it is important to consider the possibility of longer query strings, which may cause issues with the maximum URL length or server limitations on query string length. +This method significantly improves the component's performance by reducing the amount of data transferred to the client side, thereby enhancing efficiency and responsiveness. However, it is important to consider the potential for longer query strings, which might exceed maximum URL lengths or server limitations. ```cshtml @using Syncfusion.Blazor @@ -515,13 +523,14 @@ This method greatly improves the component's performance by reducing the data th } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLyCNjHqazFgUHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} The following image represents how the parameters are passed using ODataV4 filter. ![ODataV4 filter](images/blazor-odatav4-filter.jpg) -### Web API adaptor +### Web API Adaptor -You can bind Web API data to the scheduler using [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor). The following sample code demonstrates the way of binding remote services to the Scheduler component. +Web API data can be bound to the Scheduler using [`WebApiAdaptor`](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor). The following sample code demonstrates binding remote services to the Scheduler component. ```cshtml @using Syncfusion.Blazor @@ -560,16 +569,18 @@ You can bind Web API data to the scheduler using [WebApiAdaptor](https://blazor. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrosjXdUuSITIaj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Url Adaptor -### Url adaptor -You can use the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) of **SfDataManager** when binding data source for remote data. During the initial load of Scheduler, data are fetched from remote data and bound to the Scheduler using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of **SfDataManager**. +The [`UrlAdaptor`](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) of `SfDataManager` is used to bind remote data sources. During the initial load of the Scheduler, data is fetched from the remote service via the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of `SfDataManager` and bound to the Scheduler. CRUD operations in the Scheduler can be mapped to server-side controller actions by using the properties [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl), [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl), [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl), and [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl). -* `InsertUrl` – You can perform a single insertion operation on the server-side. -* `UpdateUrl` – You can update single data on the server-side. -* `RemoveUrl` – You can remove single data on the server-side. -* `CrudUrl` – You can perform bulk data operation on the server-side. +* `InsertUrl` – Specifies the URL for a single insertion operation on the server-side. +* `UpdateUrl` – Specifies the URL for updating a single data record on the server-side. +* `RemoveUrl` – Specifies the URL for removing a single data record on the server-side. +* `CrudUrl` – Specifies the URL for performing bulk data operations (batch CRUD) on the server-side. The following sample code demonstrates binding data to the Scheduler component through the SfDataManager using UrlAdaptor. @@ -704,7 +715,7 @@ namespace Url_Adaptor.Controller } ``` -### Sending additional parameters to the server +### Sending Additional Parameters to the Server To send an additional custom parameter to the server-side post, make use of the `AddParams` method of [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Query). Now, assign this [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Query) object with additional parameters to the [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Query) property of Scheduler. @@ -732,10 +743,10 @@ N> The parameters added using the [`Query`](https://help.syncfusion.com/cr/blazo ### Authorization and Authentication -It is common to have authorization in the server of origin to prevent anonymous access to the data services. **SfDataManager** can consume data from such protected remote data services with the proper bearer token. The access token or bearer token can be used by **SfDataManager** in one of the following ways. +It is common to have authorization configured on the server to prevent anonymous access to data services. `SfDataManager` can consume data from such protected remote services by including the proper bearer token in the request. The access token or bearer token can be utilized by `SfDataManager` in one of the following ways: -* By using the pre-configured HttpClient with the access token or authentication message handler, SfDataManager can access protected remote services. When registering your HttpClient, the registration should be done before calling `AddSyncfusionBlazor()` method in **Program.cs**, so that SfDataManager will not create its own HttpClient and uses the already configured HttpClient. -* Setting access token in the default header of the HttpClient by injecting it in the page. See here for adding default headers to HttpClient. +* **Using a pre-configured `HttpClient`:** Register a pre-configured `HttpClient` with the access token or an authentication message handler before calling `AddSyncfusionBlazor()` in `Program.cs`. This ensures that `SfDataManager` uses the already configured `HttpClient` instead of creating its own. +* **Setting access token in `HttpClient.DefaultRequestHeaders`:** Inject `HttpClient` into the Blazor component and set the access token in `DefaultRequestHeaders`. ```csharp @@ -762,9 +773,9 @@ It is common to have authorization in the server of origin to prevent anonymous Getting the bearer token may vary with access token providers. More information on configuring HttpClient with authentication can be found on the official page [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-7.0). -### Setting custom headers +### Setting Custom Headers -To add a custom headers to the data request, use the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Headers) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). +To add custom headers to the data request, use the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Headers) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The following sample code demonstrates adding custom headers to the `SfDataManager` request, @@ -807,7 +818,9 @@ The following sample code demonstrates adding custom headers to the `SfDataManag } ``` -### Handling HTTP error +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthysjZnqYRnFOwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Handling HTTP Errors During server interaction from the Scheduler, sometimes server-side exceptions might occur. These error messages or exception details can be acquired in client-side using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionFailure) event. @@ -868,9 +881,9 @@ The following sample code demonstrates notifying user when server-side exception } } ``` -## Load on demand +## Load on Demand -In the Scheduler, there is an option to implement data loading on demand, which helps minimize the amount of data transmitted over the network, especially when working with large volumes of data. This can be achieved by filtering appointments on the server side based on start date and end date. +The Scheduler supports implementing data loading on demand, which helps minimize data transfer over the network, particularly with large volumes of data. This is achieved by filtering appointments on the server side based on the currently requested `StartDate` and `EndDate`. ```cshtml public async Task> Get(DateTime StartDate, DateTime EndDate) @@ -1066,15 +1079,15 @@ namespace syncfusion_blazor_app.Data {% endtabs %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/blazor-scheduler-load-appointments-on-demand) +The complete working sample for load on demand can be downloaded from [GitHub](https://github.com/SyncfusionExamples/blazor-scheduler-load-appointments-on-demand). -## SQL Server data binding(SQL Client) +## SQL Server Data Binding (SQL Client) -The following examples demonstrate how to consume data from SQL Server using Microsoft SqlClient and bound it to Blazor Scheduler. You can achieve this requirement by using [Custom Adaptor](./custom-binding#custom-adaptor-as-component). +The following examples demonstrate how to consume data from SQL Server using Microsoft SqlClient and bind it to the Blazor Scheduler. This requirement can be achieved by using a [Custom Adaptor](./custom-binding#custom-adaptor-as-component). -Before the implementation, add required NuGet like **Microsoft.Data.SqlClient** and **Syncfusion.Blazor** in your application. In the following sample, Custom Adaptor can be created as a Component. In custom adaptor **Read** method, you can get filter appointments using **DataManagerRequest**. +Before implementation, add the required NuGet packages like **Microsoft.Data.SqlClient** and **Syncfusion.Blazor** to the application. In the following sample, the `CustomAdaptor` is created as a Blazor component. In its `Read` method, filter appointments are retrieved using `DataManagerRequest`. -Based on the DataManagerRequest, you can form SQL query string and execute the SQL query and retrieve the data from database using **SqlDataAdapter**. The Fill method of the **DataAdapter** is used to populate a **DataSet** with the results of the **SelectCommand** of the DataAdapter, then convert the DataSet into List and return **Result** and **Count** pair object in **Read** method to bind the data to Scheduler. +Based on the `DataManagerRequest`, an SQL query string is formed and executed. The `SqlDataAdapter` then retrieves data from the database. The Fill method of the **DataAdapter** is used to populate a **DataSet** with the results of the **SelectCommand** of the DataAdapter, then convert the DataSet into List and return **Result** and **Count** pair object in **Read** method to bind the data to Scheduler. ```cshtml @using Syncfusion.Blazor.Schedule @@ -1177,14 +1190,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Performing CRUD using Entity Framework -You need to follow the below steps to consume data from the **Entity Framework** in our Scheduler component. - -To get start quickly about CRUD action using entity framework in our Scheduler, you can check on this video: +To consume data from **Entity Framework Core** in the Scheduler component, follow these steps. For a quick visual guide on CRUD actions with Entity Framework, watch this video: {% youtube "youtube:https://www.youtube.com/watch?v=QlzdcZTmOrU-0"%} -### Create DBContext class +### Create DBContext Class The first step is to create a DBContext class called **ScheduleDataContext** to connect to a Microsoft SQL Server database. @@ -1348,7 +1359,7 @@ namespace Restful_Services.Controllers } ``` -### Configure Scheduler component using ODataV4Adaptor +### Configure Scheduler Component Using ODataV4Adaptor Now, the Scheduler can be configured using the `SfDataManager` to interact with the created OData service and consume the data appropriately. To interact with OData, use `ODataV4Adaptor`. @@ -1367,17 +1378,17 @@ Now, the Scheduler can be configured using the `SfDataManager` to interact with } ``` -N> You can find the working sample on Entity framework [here](https://github.com/SyncfusionExamples/blazor-scheduler-crud-using-restful-service). +N> You can find the working sample on Entity Framework [here](https://github.com/SyncfusionExamples/blazor-scheduler-crud-using-restful-service). -## Configuring Scheduler with Google API service +## Configuring Scheduler with Google API Service -We have assigned the dataSource that is retrieved from the Google services within the [`OnInitializedAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_OnInitializedAsync) method. And, the CRUD actions are performed within the [`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event. +The Scheduler can be configured to retrieve events from a Google Calendar API service. The data obtained from Google services would typically be assigned to the Scheduler's `DataSource` within the [`OnInitializedAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_OnInitializedAsync) method. And, the CRUD actions are performed within the [`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event. -We have to write our own service to connect retrieve the events from the Google calendar. +A custom service would need to be implemented to connect and retrieve events from the Google Calendar API. -N> The runnable sample for the above code will be available [here](https://github.com/SyncfusionExamples/google-calendar-synchronization-with-blazor-scheduler). +N> A runnable sample demonstrating Google Calendar synchronization with Blazor Scheduler is available [here](https://github.com/SyncfusionExamples/google-calendar-synchronization-with-blazor-scheduler). -## See also +## See Also * [How to Access Microsoft Graph Calendar Events with Syncfusion® Blazor Scheduler](https://www.syncfusion.com/blogs/post/how-to-access-microsoft-graph-calendar-events-with-syncfusion-blazor-scheduler.aspx ) * [Easy Steps to Synchronize JIRA Calendar Tasks with the Blazor Scheduler](https://www.syncfusion.com/blogs/post/easy-steps-to-synchronize-jira-calendar-tasks-with-the-blazor-scheduler.aspx) \ No newline at end of file diff --git a/blazor/scheduler/images/add-appointment.png b/blazor/scheduler/images/add-appointment.png new file mode 100644 index 0000000000..3f48730b16 Binary files /dev/null and b/blazor/scheduler/images/add-appointment.png differ diff --git a/blazor/scheduler/images/backgroundcolor.png b/blazor/scheduler/images/backgroundcolor.png new file mode 100644 index 0000000000..683df97670 Binary files /dev/null and b/blazor/scheduler/images/backgroundcolor.png differ diff --git a/blazor/scheduler/images/bind-eventnames.png b/blazor/scheduler/images/bind-eventnames.png new file mode 100644 index 0000000000..f7ce3481fd Binary files /dev/null and b/blazor/scheduler/images/bind-eventnames.png differ diff --git a/blazor/scheduler/images/custom-fields.png b/blazor/scheduler/images/custom-fields.png new file mode 100644 index 0000000000..60d04d24f0 Binary files /dev/null and b/blazor/scheduler/images/custom-fields.png differ diff --git a/blazor/scheduler/images/different-color.png b/blazor/scheduler/images/different-color.png new file mode 100644 index 0000000000..46e289bcfd Binary files /dev/null and b/blazor/scheduler/images/different-color.png differ diff --git a/blazor/scheduler/images/disable-scrolling.gif b/blazor/scheduler/images/disable-scrolling.gif new file mode 100644 index 0000000000..3aab512c2d Binary files /dev/null and b/blazor/scheduler/images/disable-scrolling.gif differ diff --git a/blazor/scheduler/images/drag-drop.png b/blazor/scheduler/images/drag-drop.png new file mode 100644 index 0000000000..54bd04e2ee Binary files /dev/null and b/blazor/scheduler/images/drag-drop.png differ diff --git a/blazor/scheduler/images/edit-event.png b/blazor/scheduler/images/edit-event.png new file mode 100644 index 0000000000..2926e1ca87 Binary files /dev/null and b/blazor/scheduler/images/edit-event.png differ diff --git a/blazor/scheduler/images/eventrendered.png b/blazor/scheduler/images/eventrendered.png new file mode 100644 index 0000000000..8737e0d470 Binary files /dev/null and b/blazor/scheduler/images/eventrendered.png differ diff --git a/blazor/scheduler/images/field-settings.png b/blazor/scheduler/images/field-settings.png new file mode 100644 index 0000000000..79435f34c2 Binary files /dev/null and b/blazor/scheduler/images/field-settings.png differ diff --git a/blazor/scheduler/images/filter.png b/blazor/scheduler/images/filter.png new file mode 100644 index 0000000000..40d10628ee Binary files /dev/null and b/blazor/scheduler/images/filter.png differ diff --git a/blazor/scheduler/images/list-data.png b/blazor/scheduler/images/list-data.png new file mode 100644 index 0000000000..c409fb9a6b Binary files /dev/null and b/blazor/scheduler/images/list-data.png differ diff --git a/blazor/scheduler/images/min-maxdate.png b/blazor/scheduler/images/min-maxdate.png new file mode 100644 index 0000000000..3042e75f51 Binary files /dev/null and b/blazor/scheduler/images/min-maxdate.png differ diff --git a/blazor/scheduler/images/normal-event.png b/blazor/scheduler/images/normal-event.png new file mode 100644 index 0000000000..0e03b00397 Binary files /dev/null and b/blazor/scheduler/images/normal-event.png differ diff --git a/blazor/scheduler/images/observablecollectiondata.png b/blazor/scheduler/images/observablecollectiondata.png new file mode 100644 index 0000000000..5f9c02f66c Binary files /dev/null and b/blazor/scheduler/images/observablecollectiondata.png differ diff --git a/blazor/scheduler/images/prevent-overlap.png b/blazor/scheduler/images/prevent-overlap.png new file mode 100644 index 0000000000..bddc414d0e Binary files /dev/null and b/blazor/scheduler/images/prevent-overlap.png differ diff --git a/blazor/scheduler/images/readonly.png b/blazor/scheduler/images/readonly.png new file mode 100644 index 0000000000..79699038d3 Binary files /dev/null and b/blazor/scheduler/images/readonly.png differ diff --git a/blazor/scheduler/images/specific-readonly.png b/blazor/scheduler/images/specific-readonly.png new file mode 100644 index 0000000000..422bb746b5 Binary files /dev/null and b/blazor/scheduler/images/specific-readonly.png differ diff --git a/blazor/scheduler/images/template.png b/blazor/scheduler/images/template.png new file mode 100644 index 0000000000..fcd0286505 Binary files /dev/null and b/blazor/scheduler/images/template.png differ diff --git a/blazor/scheduler/images/validation.png b/blazor/scheduler/images/validation.png new file mode 100644 index 0000000000..488dab4fd2 Binary files /dev/null and b/blazor/scheduler/images/validation.png differ diff --git a/blazor/scheduler/images/weekend-color.png b/blazor/scheduler/images/weekend-color.png new file mode 100644 index 0000000000..ab37aefdfd Binary files /dev/null and b/blazor/scheduler/images/weekend-color.png differ