diff --git a/blazor/scheduler/dimensions.md b/blazor/scheduler/dimensions.md index f67faa1fb4..390fa3ac2c 100644 --- a/blazor/scheduler/dimensions.md +++ b/blazor/scheduler/dimensions.md @@ -9,7 +9,7 @@ documentation: ug # Scheduler Dimensions in Blazor Scheduler Component -The Scheduler dimensions refers to both height and width of the entire layout and it accepts 3 types of values. +The dimensions of the Syncfusion Blazor Scheduler component, encompassing both height and width of its entire layout, can be defined using three types of values: * auto * pixel @@ -17,7 +17,7 @@ The Scheduler dimensions refers to both height and width of the entire layout an ## Auto Height and Width -When height and width of the Scheduler are set to `auto`, it will try hard to keep an element the same width as its parent container. In other words, for the parent container that holds Scheduler, it's width or height will be the sum of its children. By default, Scheduler is assigned with `auto` values for both height and width properties. +When the height and width of the Scheduler are set to `auto`, the component attempts to match the width of its parent container. In this configuration, the parent container's width or height will be the cumulative size of its children. By default, the Scheduler component is assigned `auto` values for both its `Height` and `Width` properties. ```cshtml @using Syncfusion.Blazor.Schedule @@ -47,10 +47,11 @@ When height and width of the Scheduler are set to `auto`, it will try hard to ke } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBesjtcsURMTcIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Height and Width in pixel +## Height and Width in Pixel -The Scheduler height and width will be rendered exactly as per the given pixel values. It accepts both string and number values. +The Scheduler's height and width render precisely according to the specified pixel values. Both string and number values are accepted for these properties. ```cshtml @using Syncfusion.Blazor.Schedule @@ -80,10 +81,13 @@ The Scheduler height and width will be rendered exactly as per the given pixel v } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZByiNjQWKmhecik?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Height and Width in percentage +![Height and width in pixel in Blazor Scheduler](images/height-width-inpixel.png) -When height and width of the Scheduler are given as percentage, it will make the Scheduler as wide as the parent container. +## Height and Width in Percentage + +When the height and width of the Scheduler are provided as percentage values, the component will expand to occupy the specified percentage of its parent container's dimensions. ```cshtml @using Syncfusion.Blazor.Schedule @@ -113,10 +117,11 @@ When height and width of the Scheduler are given as percentage, it will make the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLSstjwCqYbFnCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## How to set the full height of the view port +## How to set the full height of the viewport -When the height of the Scheduler is set in the CSS unit of Viewport Height(vh), it will make the Scheduler to occupy the full height within the viewport. +Setting the Scheduler's height using the CSS unit of Viewport Height (vh) allows the component to occupy the full height within the viewport. In the following example, the application header height (4.6rem) is reduced from the total viewport. @@ -148,5 +153,4 @@ In the following example, the application header height (4.6rem) is reduced from } } ``` - ![Blazor Scheduler with View Port Height](images/blazor-scheduler-view-port-height.png) \ No newline at end of file diff --git a/blazor/scheduler/editor-template.md b/blazor/scheduler/editor-template.md index 3c92121af5..6a4023fb58 100644 --- a/blazor/scheduler/editor-template.md +++ b/blazor/scheduler/editor-template.md @@ -9,29 +9,31 @@ documentation: ug # Editor Window Customization in Blazor Scheduler Component -Scheduler makes use of popups and dialog to display the required notifications, as well as includes an editor window with event fields for making the appointment creation and editing process easier. You can also easily customize the editor window and the fields present in it, and can also apply validations on those fields. +The Scheduler utilizes popups and dialogs for notifications and includes an editor window with event fields to facilitate appointment creation and editing. The editor window and its fields can be customized, and validations can be applied to these fields. -## Event editor +## Event Editor -The editor window usually opens on the Scheduler, when a cell or event is double clicked. When a cell is double clicked, the detailed editor window opens in "Add new" mode, whereas when an event is double clicked, the same is opened in an "Edit" mode. +The editor window usually opens on the Scheduler, when a The editor window typically opens in the Scheduler when a cell or event is double-clicked. Double-clicking a cell opens the detailed editor window in "Add new" mode, while double-clicking an existing event opens it in "Edit" mode. -In mobile devices, the detailed editor window can be opened in edit mode by clicking the edit icon on the popup, that opens on single tapping an event. You can also open it in add mode by single tapping a cell, which will display a `+` indication, clicking on it again will open the editor window. +On mobile devices, the detailed editor window can be opened in edit mode by tapping the edit icon on the popup that appears after a single tap on an event. The editor window can also be opened in add mode by single-tapping a cell, which displays a `+` indication; tapping it again opens the editor window. -N> You can also prevent the editor window from opening, by rendering Scheduler in a [`Readonly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_Readonly) mode or by doing code customization within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event. +N> The editor window can be prevented from opening, by rendering Scheduler in a [`Readonly`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_Readonly) mode or by doing code customization within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event. ### How to change the editor window header title and text of footer buttons -You can change the header title and the text of buttons displayed at the footer of the editor window by changing the appropriate localized word collection in the resx file of your culture file available in the following directory `Project root folder > Resources > SfResources-en-US.resx` like the below image. +The header title and the text of buttons displayed at the footer of the editor window can be changed by modifying the appropriate localized word collection in the `.resx` file for the specific culture. This file is typically located in the `Project root folder > Resources > SfResources-en-US.resx` directory. + +The following image illustrates the customization of localized words in the resx file. ![Customizing Local Words in resx file of Blazor Scheduler](images/blazor-scheduler-custom-word-in-resx.png) -The editor window opening for creating new event will be displayed as in the following image after changing the localized words. +After changing the localized words, the editor window for creating new events will appear as shown in the following image. ![Editing Window with Custom Local Words in Blazor Scheduler](images/blazor-scheduler-editing-local-word.png) -### How to change the label text of default editor fields +### How to Change the Label Text of Default Editor Fields -To change the default labels such as Title, Location and other field names in the editor window, make use of the `Title` property available within the field option of `ScheduleEventSettings`. +To change the default labels for fields such as "Title," "Location," and other field names in the editor window, utilize the `Title` property available within the field option of `ScheduleEventSettings`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -77,12 +79,13 @@ To change the default labels such as Title, Location and other field names in th } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLIWjZGszsobUfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Editor Window with Custom Label in Blazor Scheduler](images/blazor-scheduler-custom-label.png) -### Field validation +### Field Validation -It is possible to validate the required fields of the editor window before submitting it, by adding appropriate validation rules to each field. In the following code example, validation are applied to Subject, Location and Description fields. +It is possible to validate the required fields of the editor window before submission by adding appropriate validation rules to each field. The following code example demonstrates applying validations to the Subject, Location, and Description fields. ```cshtml @using Syncfusion.Blazor.Schedule @@ -130,10 +133,11 @@ It is possible to validate the required fields of the editor window before submi } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBoCtZcWphUmFIs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Editor window with Validation in Blazor Scheduler](images/blazor-scheduler-validation.png) -### Customizing the default time duration in editor window +### Customizing the Default Time Duration in Editor Window In default event editor window, start and end time duration are processed based on the [`Interval`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTimeScale.html#Syncfusion_Blazor_Schedule_ScheduleTimeScale_Interval) value set within the [`ScheduleTimeScale`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTimeScale.html) property. By default, [`Interval`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTimeScale.html#Syncfusion_Blazor_Schedule_ScheduleTimeScale_Interval) value is set to 30, and therefore the start and end time duration within the event editor will be in a 30 minutes time difference. This duration value can be changed by changing the [`Duration`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.PopupOpenEventArgs-1.html#Syncfusion_Blazor_Schedule_PopupOpenEventArgs_1_Duration) option within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event. @@ -179,8 +183,9 @@ In default event editor window, start and end time duration are processed based } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBestZGWfUpHJkB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### How to prevent the display of editor and quick popups +### How to Prevent the Display of Editor and Quick Popups It is possible to prevent the display of editor and quick popup windows by passing the value `true` to `cancel` option within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event. @@ -226,6 +231,7 @@ It is possible to prevent the display of editor and quick popup windows by passi } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthIsNtcszfnSECd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} In case, in order to prevent only specific popups on Scheduler, check the condition based on the popup type. The types of the popup that can be checked within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event are as follows. @@ -241,17 +247,17 @@ In case, in order to prevent only specific popups on Scheduler, check the condit | `ValidationAlert` | For validation alert popup.| | `RecurrenceValidationAlert` | For recurrence validation alert popup.| -### How to open editor window manually +### How to Open Editor Window Manually -It is possible to open the editor window manually for a specific time or certain events by 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 which allows the [TValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_OpenEditor__0_Syncfusion_Blazor_Schedule_CurrentAction_) or [CellClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.CellClickEventArgs.html) and `CurrentAction` as parameters. +The editor window can be opened manually for a specific time or certain events by 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 which allows the [TValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_OpenEditor__0_Syncfusion_Blazor_Schedule_CurrentAction_) or [CellClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.CellClickEventArgs.html) and `CurrentAction` as parameters. N> [Here](https://blazor.syncfusion.com/documentation/scheduler/how-to/open-editor-window-on-single-click) is the example to open the editor window on a single click. -## Customizing event editor using template +## Customizing Event Editor using Template -The event editor window can be customized by making use of the [`EditorTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorTemplate) option. Each field defined within template must use two way binding for the `Value` property of the components used within the template to perform CRUD actions. +The event editor window can be customized using the [`EditorTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorTemplate) option. Each field defined within the template must use two-way binding for the `Value` property of its components to perform CRUD operations. -To get start quickly on customizing editor window using template, you can check on this video: +For a quick start on customizing the editor window using templates, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=t0v8rCEP7ps"%} @@ -342,11 +348,15 @@ To get start quickly on customizing editor window using template, you can check } ``` -### How to customize header and footer using template +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBeMtNQszITgnTX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Editor window with Teamplate in Blazor Scheduler](images/editor-template.png) + +### How to Customize Header and Footer using Template The editor window's header and footer can be enhanced with custom designs using the [`EditorHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorHeaderTemplate) and [`EditorFooterTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorFooterTemplate) options. -In this demo, we tailor the editor's header according to the appointment's subject field using the [`EditorHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorHeaderTemplate). Furthermore, we make use of the [`EditorFooterTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorFooterTemplate) to handle the functionality of validating specific fields before proceeding with the save action or canceling it if validation requirements are not met. +In this demonstration, the editor's header is tailored according to the appointment's subject field using the [`EditorHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorHeaderTemplate). Furthermore, the [`EditorFooterTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_EditorFooterTemplate) is used to manage the functionality of validating specific fields before proceeding with a save action or canceling it if validation requirements are not met. ```cshtml @using Syncfusion.Blazor.Schedule @@ -470,12 +480,13 @@ In this demo, we tailor the editor's header according to the appointment's subje } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIMXXwMfdPigLU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Add customize header and footer using template in Blazor Scheduler](images/blazor-scheduler-custom-editor-header-footer.png) -### How to add resource options within editor template +### How to Add Resource Options Within Editor Template -The resource field can be added within editor template with the following code example. +A resource field can be added within the editor template using the following code example. ```cshtml @using Syncfusion.Blazor.Schedule @@ -568,12 +579,13 @@ The resource field can be added within editor template with the following code e } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhSCNDGCfmyieob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Add Resource Options within Editor Template in Blazor Scheduler](images/blazor-scheduler-custom-window-with-resource.png) -N> EditorTemplate is not applicable when we set `AllowMutiple` as true without enabling `AllowGroupEdit`, so in that case use custom editor window. +N> The `EditorTemplate` is not applicable when `AllowMultiple` is set to `true` without enabling `AllowGroupEdit`. In such cases, a custom editor window should be used. -## How to add recurrence options within editor template +## How to Add Recurrence Options Within Editor Template ```cshtml @using Syncfusion.Blazor.Schedule @@ -670,10 +682,11 @@ N> EditorTemplate is not applicable when we set `AllowMutiple` as true without e } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthoWtNGCTFgqKxi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Add Recurrence Options within Editor Template in Blazor Scheduler](images/blazor-scheduler-custom-window-with-recurrence.png) -## Apply validations on editor template fields +## Apply Validations on Editor Template Fields In the following code example, validation has been added to the `EventType` field by importing `DataAnnotations` namespace and that field is set as `Required` and displays the validation message for this field by using the `ValidationMessage` tag. @@ -778,12 +791,13 @@ In the following code example, validation has been added to the `EventType` fiel } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLyMjtwspPYVoPA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Editor Template with Validation in Blazor Scheduler](images/blazor-scheduler-custom-window-validation.png) -## Quick popups +## Quick Popups -The quick info popups are the ones that gets opened, when a cell or appointment is single clicked on the desktop mode. On single clicking a cell, you can simply provide a subject and save it. Also, while single clicking on an event, a popup will be displayed where you can get the overview of the event information. You can also edit or delete those events through the options available in it. +Quick info popups appear when a cell or appointment is single-clicked in desktop mode. Single-clicking a cell allows for providing a subject and saving it. When an event is single-clicked, a popup provides an overview of the event information. Events can also be edited or deleted through the options available in this popup. By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set `false` to [`ShowQuickInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ShowQuickInfo) property. @@ -821,14 +835,15 @@ By default, these popups are displayed over cells and appointments of Scheduler } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDheMjXQWzEYPlKZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> The quick popup that opens while single clicking on the cells are not applicable on mobile devices. -### How to change the watermark text of quick popup subject +### How to Change the Watermark Text of Quick Popup Subject -By default, `Add Title` text is displayed on the subject field of quick popup. To change the default watermark text, you can change the value of the appropriate localized word collection in the resx file of your culture file. +By default, `Add Title` text is displayed on the subject field of the quick popup. To change the default watermark text, modify the value of the appropriate localized word collection in the resx file for the specific culture. -### Customizing quick popups +### Customizing Quick Popups The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the [`ScheduleQuickInfoTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleQuickInfoTemplates.html) option of the Scheduler. There are 3 sub-options available to customize them easily, @@ -836,17 +851,16 @@ The look and feel of the built-in quick popup window, which opens when single cl * Content - Accepts the template design that customizes the content part of the quick popup. * Footer - Accepts the template design that customizes the footer part of the quick popup. -The quick popup accepts the template that customizes both the cell click quick popup and event click quick popup or only cell click quick popup or event click quick popup by making use of `TemplateType` option which is `TemplateType.Both` by default and also accepts `TemplateType.Cell` or `TemplateType.Event` value. +The quick popup accepts templates that customize both the cell-click quick popup and the event-click quick popup, or only one of them, by utilizing the `TemplateType` option. This option defaults to `TemplateType.Both` and also accepts `TemplateType.Cell` or `TemplateType.Event` values. -To get start quickly about customizing quick popup in our Scheduler, you can check on this video: +For a quick start on customizing quick popups in the Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=G9OCn_JOUG4-0"%} +### Customizing Quick Popup on Cell -### Customizing quick popup on cell - -The quick popup accepts the template that customizes quick popup only on cell by giving `TemplateType.Cell` to the `TemplateType` option in [`ScheduleQuickInfoTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleQuickInfoTemplates.html). +The quick popup can be customized specifically for cell clicks by setting `TemplateType.Cell` to the `TemplateType` option within [`ScheduleQuickInfoTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleQuickInfoTemplates.html). ```cshtml @using Syncfusion.Blazor.Schedule @@ -1038,10 +1052,13 @@ The quick popup accepts the template that customizes quick popup only on cell by } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLoMtZwMeWXiHTW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Customizing quick popup on event +![Quick Popup Customization for cell in Blazor Scheduler](images/cell-quickpopup.png) -The quick popup accepts the template that customizes quick popup only on event by giving `TemplateType.Event` to the `TemplateType` option in [`ScheduleQuickInfoTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleQuickInfoTemplates.html). +### Customizing Quick Popup on Event + +The quick popup can be customized specifically for event clicks by setting `TemplateType.Event` to the `TemplateType` option within [`ScheduleQuickInfoTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleQuickInfoTemplates.html). ```cshtml @using Syncfusion.Blazor.Schedule @@ -1220,7 +1237,9 @@ The quick popup accepts the template that customizes quick popup only on event b ``` -### Customizing the different combinations for cell and event quick popups +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhesXDQsIhGlACu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Customizing the Different Combinations for Cell and Event Quick Popups The quick popup accepts the template that customizes only event click quick popup by giving `TemplateType.Both` to the `TemplateType` option in [`ScheduleQuickInfoTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleQuickInfoTemplates.html). @@ -1502,11 +1521,12 @@ The quick popup accepts the template that customizes only event click quick popu } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSMtDGCSUctfpl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Quick Popup on Cell in Blazor Scheduler](images/blazor-scheduler-cell-click-quick-popup.png) ![Quick Popup on Event in Blazor Scheduler](images/blazor-scheduler-event-click-quick-popup.png) -### How to enable/disable quick popup on selection end +### How to Enable/Disable Quick Popup on Selection End By default, the [`QuickInfoOnSelectionEnd`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_QuickInfoOnSelectionEnd) property is set to `false` to prevent the quick popup at the end of multiple cell selection. The quick popup will be shown at the selection end by setting `true` value to this property. @@ -1546,10 +1566,11 @@ By default, the [`QuickInfoOnSelectionEnd`](https://help.syncfusion.com/cr/blazo } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrIstNwiefoPDuP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### How to enable/disable the multiple days selection +### How to Enable/Disable the Multiple Days Selection -By default, the Scheduler allows the user to select multiple days. We can prevent this action by setting `false` to [`AllowMultiRowSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiRowSelection) property whereas its default value is `true`. +By default, the Scheduler allows multiple-day selection. This action can be prevented by setting the [`AllowMultiRowSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_AllowMultiRowSelection) property to `false`, whereas its default value is `true`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -1588,9 +1609,11 @@ By default, the Scheduler allows the user to select multiple days. We can preven } ``` -### How to close quick info popup manually +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSsNtwMISHIvcH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### How to Close Quick Info Popup Manually -The quick info popup can be closed in scheduler by using the [`CloseQuickInfoPopupAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CloseQuickInfoPopupAsync) public method. +The quick info popup can be closed in the Scheduler by using the [`CloseQuickInfoPopupAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CloseQuickInfoPopupAsync) public method. ```cshtml @using Syncfusion.Blazor.Schedule @@ -1636,14 +1659,15 @@ The quick info popup can be closed in scheduler by using the [`CloseQuickInfoPop } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVyMtjcWSxyjbgl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## More events indicator and popup +## More Events Indicator and Popup -When the number of appointments count that lies on a particular time range * default appointment height exceeds the default height of a cell in month view and all other timeline views, a `+ more` text indicator will be displayed at the bottom of those cells. This indicator denotes that the cell contains few more appointments in it and clicking on that will display a popup displaying all the appointments present on that day. +When the number of appointments in a particular time range (or with a height exceeding the default cell height in month and timeline views) surpasses the default cell height, a "+ more" text indicator is displayed at the bottom of those cells. This indicator signifies additional appointments; clicking it displays a popup showing all appointments for that day. N> To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event. -The same indicator is displayed on all-day row in calendar views such as day, week and work week views alone, when the number of appointment count present in a cell exceeds three. Clicking on the text indicator here will not open a popup, but will allow the expand/collapse option for viewing the remaining appointments present in the all-day row. +The same indicator appears in the all-day row of calendar views (day, week, and work week) when the appointment count in a cell exceeds three. Clicking the text indicator in this context does not open a popup but provides expand/collapse options for viewing the remaining appointments in the all-day row. ```cshtml @using Syncfusion.Blazor.Schedule @@ -1685,12 +1709,13 @@ The same indicator is displayed on all-day row in calendar views such as day, we } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhoWDNQMSQZrlHk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![More Event Popup in Blazor Scheduler](images/blazor-scheduler-more-event-popup.png) -### How to prevent the display of popup when clicking on the more text indicator +### How to Prevent the Display of Popup When Clicking on the More Text Indicator -It is possible to prevent the display of popup window by passing the value `true` to `Cancel` option within the [`MoreEventsClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_MoreEventsClicked) event. +The display of the popup window can be prevented by setting the `Cancel` option to `true` within the [`MoreEventsClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_MoreEventsClicked) event. ```cshtml @using Syncfusion.Blazor.Schedule diff --git a/blazor/scheduler/events.md b/blazor/scheduler/events.md index 6006b43ba6..28b1c7c322 100644 --- a/blazor/scheduler/events.md +++ b/blazor/scheduler/events.md @@ -9,13 +9,13 @@ documentation: ug # Events in Blazor Scheduler Component -In this section, the list of events of the Scheduler component have been provided which will be triggered for appropriate Scheduler actions. +This section provides a list of events associated with the Scheduler component that trigger upon appropriate Scheduler actions. The events should be provided to the Scheduler using **ScheduleEvents** tag. When using events of Scheduler, **TValue** must be provided in the **ScheduleEvents** tag. ## ActionCompleted -[`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event triggers on successful completion of the Scheduler actions. +[`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event triggers upon the successful completion of Scheduler actions. The action type that can be checked within the [`ActionCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_ActionCompleted) event are as follows. @@ -77,7 +77,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## Created -[`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Created) event triggers after the Scheduler component is created. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Created) event triggers after the Scheduler component is rendered. ```cshtml @using Syncfusion.Blazor.Schedule @@ -98,7 +98,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. DateTime CurrentDate = new DateTime(2020, 3, 10); public void OnCreated() { - //Here you can customize your code + // Custom code can be implemented here. } List DataSource = new List { @@ -122,7 +122,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## DataBinding -[`DataBinding`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBinding) event triggers before the data binds to the Scheduler. +The [`DataBinding`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBinding) event triggers before data binds to the Scheduler. ```cshtml @using Syncfusion.Blazor.Schedule @@ -167,7 +167,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## DataBound -[`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event triggers once the event data is bound to the Scheduler. +The [`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_DataBound) event triggers once event data is bound to the Scheduler. ```cshtml @using Syncfusion.Blazor.Schedule @@ -213,7 +213,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## Destroyed -[`Destroyed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Destroyed) event triggers when the Scheduler component is destroyed. +The [`Destroyed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Destroyed) event triggers when the Scheduler component is destroyed. ```cshtml @using Syncfusion.Blazor.Schedule @@ -234,7 +234,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. DateTime CurrentDate = new DateTime(2020, 3, 10); public void OnDestroyed() { - //Here you can customize your code + // Custom code can be implemented here. } List DataSource = new List { @@ -258,7 +258,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## Dragged -[`Dragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event triggers when the dragging of appointment is stopped. +[`Dragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Dragged) event triggers when appointment dragging is stopped. ```cshtml @using Syncfusion.Blazor.Schedule @@ -304,7 +304,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## EventRendered -[`EventRendered`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event triggers before each of the event getting rendered on the Scheduler user interface. +The [`EventRendered`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered) event triggers before each event is rendered on the Scheduler user interface. ```cshtml @using Syncfusion.Blazor.Schedule @@ -358,7 +358,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## MoreEventsClicked -[`MoreEventsClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_MoreEventsClicked) event triggers when the more events indicator are clicked. +The [`MoreEventsClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_MoreEventsClicked) event triggers when the "more events" indicator is clicked. ```cshtml @using Syncfusion.Blazor.Schedule @@ -406,7 +406,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## Navigating -[`Navigating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Navigating) event triggers before the date or view navigation takes place on Scheduler. +[`Navigating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Navigating) event triggers before date or view navigation occurs in the Scheduler. ```cshtml @using Syncfusion.Blazor.Schedule @@ -453,9 +453,9 @@ The action type that can be checked within the [`ActionCompleted`](https://help. ## OnActionBegin -[`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event triggers on beginning of every Scheduler action. +[`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event triggers at the beginning of every Scheduler action. -The request type that can be checked within the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event are as follows. +The `ActionType` that can be checked within the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionBegin) event are as follows. | ActionType | Description | |------|-------------| @@ -513,7 +513,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s ## OnActionFailure -[`OnActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionFailure) event triggers when a Scheduler action gets failed or interrupted. +[`OnActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnActionFailure) event triggers when a Scheduler action fails or is interrupted. ```cshtml @using Syncfusion.Blazor.Schedule @@ -558,7 +558,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s ## OnCellClick -[`OnCellClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnCellClick) event triggers when the Scheduler cells are single clicked or on single tap on the same cells in mobile devices. +[`OnCellClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnCellClick) event triggers when Scheduler cells are single-clicked or upon single-tapping the same cells on mobile devices. ```cshtml @using Syncfusion.Blazor.Schedule @@ -695,7 +695,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s ## OnEventClick -[`OnEventClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventClick) event triggers when the events are single clicked or on single tapping the events on the mobile devices. +[`OnEventClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventClick) event triggers when an event is single-clicked or upon single-tapping an event on mobile devices. ```cshtml @using Syncfusion.Blazor.Schedule @@ -742,7 +742,7 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s ## OnEventDoubleClick -[`OnEventDoubleClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventDoubleClick) event triggers when the events are double clicked. +[`OnEventDoubleClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnEventDoubleClick) event triggers when an event is double-clicked. ```cshtml @using Syncfusion.Blazor.Schedule @@ -790,9 +790,9 @@ The request type that can be checked within the [`OnActionBegin`](https://help.s ## OnPopupClose -[`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event triggers before any of the Scheduler popups close on the page. +[`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event triggers before any Scheduler popups close on the page. -In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event are as follows. +To prevent only specific popups in the Scheduler, the condition can be checked based on the popup type. The `PopupType` values that can be checked within the [`OnPopupClose`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupClose) event are as follows. | PopupType | Description | |------|-------------| @@ -852,9 +852,9 @@ In case, if you need to prevent only specific popups on Scheduler, then you can ## OnPopupOpen -[`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event triggers before any of the Scheduler popups opens on the page. +[`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event triggers before any Scheduler popups open on the page. -In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event are as follows. +To prevent only specific popups in the Scheduler, the condition can be checked based on the popup type. The `PopupType` values that can be checked within the [`OnPopupOpen`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnPopupOpen) event are as follows. | PopupType | Description | |------|-------------| @@ -914,7 +914,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can ## OnRenderCell -[`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event triggers before each element of the Schedule rendering on the page. +[`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event triggers before each element of the Scheduler renders on the page. The ElementType that can be checked within the [`OnRenderCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnRenderCell) event are as follows. @@ -983,7 +983,7 @@ The ElementType that can be checked within the [`OnRenderCell`](https://help.syn ## OnResizeStart -[`OnResizeStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event triggers when an appointment is started to resize. +[`OnResizeStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_OnResizeStart) event triggers when an appointment begins to be resized. ```cshtml @using Syncfusion.Blazor.Schedule diff --git a/blazor/scheduler/exporting.md b/blazor/scheduler/exporting.md index f11ebe9a49..ff924b889e 100644 --- a/blazor/scheduler/exporting.md +++ b/blazor/scheduler/exporting.md @@ -13,7 +13,7 @@ The Scheduler supports exporting all its appointments both to an Excel or ICS ex ## Excel Exporting -The Scheduler allows to export all its events into an Excel format file by using the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method. By default, it exports all the default fields of Scheduler mapped through `` property. +The Scheduler allows exporting all its events into an Excel format file by using the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method. By default, it exports all default Scheduler fields mapped through the `` property. ```cshtml @using Syncfusion.Blazor.Schedule @@ -57,10 +57,11 @@ The Scheduler allows to export all its events into an Excel format file by using } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNheMtZQsRVBkqPH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Excel Exporting in Blazor Scheduler](images/blazor-scheduler-excel-export.png) -### Exporting with custom fields +### Exporting with Custom Fields By default, Scheduler exports all the default event fields that are mapped to it through the `` property. To limit the number of fields on the exported excel file, it provides an option to export only the custom fields of the event data. To export such custom fields alone, define the required `Fields` and pass it as argument to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method as shown in the following example. In the following code example, only 'Id', 'Subject', 'StartTime', 'EndTime' fields were exported. @@ -102,12 +103,13 @@ By default, Scheduler exports all the default event fields that are mapped to it } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBSWZNGsRBEsBHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Excel Exporting with custom Fields in Blazor Scheduler](images/blazor-scheduler-excel-export-custom-fields.png) -### Exporting individual occurrences of a recurring series +### Exporting Individual Occurrences of a Recurring Series -By default, the Scheduler exports recurring events as a single data by exporting only its parent record into the excel file. If you want to export each individual occurrences of a recurring series appointment as separate records in an Excel file, define the [`IncludeOccurrences`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_IncludeOccurrences) option as `true` and pass it as argument to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method. By default, the [`IncludeOccurrences`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_IncludeOccurrences) option is set to `false`. +By default, the Scheduler exports recurring events as a single data by exporting only its parent record into the excel file. To export each individual occurrences of a recurring series appointment as separate records in an Excel file, define the [`IncludeOccurrences`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_IncludeOccurrences) option as `true` and pass it as argument to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method. By default, the [`IncludeOccurrences`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_IncludeOccurrences) option is set to `false`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -147,10 +149,11 @@ By default, the Scheduler exports recurring events as a single data by exporting } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMZjQsdTPyniP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Exporting custom event data +### Exporting Custom Event Data -By default, the whole event collection bound to the Scheduler gets exported as an excel file. To export only specific events of Scheduler or some custom event collection, you need to pass those custom data collection as a parameter to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method as shown in this following example, through the [`CustomData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_CustomData) option. +By default, the entire event collection bound to the Scheduler is exported as an Excel file. To export only specific Scheduler events or a custom event collection, it is necessary to pass the custom data collection as a parameter to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method as shown in the following example, through the [`CustomData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_CustomData) option. N> By default, the event data are taken from Scheduler dataSource. @@ -216,10 +219,10 @@ N> By default, the event data are taken from Scheduler dataSource. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLysXjGidHNagAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Customizing the column header texts with custom fields exporting - -You can change the field names of appointment in the column header when exporting using the [`FieldsInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_FieldsInfo) option through the [`ExportFieldInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportFieldInfo.html) class and pass it as an argument to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method as shown in the following code example. +### Customizing the Column Header Texts with Custom Fields Exporting +The field names of appointments in the column header can be changed during export using the [`FieldsInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_FieldsInfo) option through the [`ExportFieldInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportFieldInfo.html) class and pass it as an argument to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method as shown in the following code example. ```cshtml @using Syncfusion.Blazor.Schedule @@ -270,12 +273,13 @@ You can change the field names of appointment in the column header when exportin } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjryCtXcindnlziL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Excel Exporting with custom header texts in Blazor Scheduler](images/blazor-scheduler-excel-export-custom-header.png) -### Export with custom file name +### Export with Custom File Name -By default, the Scheduler allows you to download the exported Excel file with a name `Schedule.xlsx`. It also provides an option to export the excel file with a custom file name, define the desired `FileName` and passing it as an argument to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method. +By default, the Scheduler downloads the exported Excel file with the name `Schedule.xlsx`. It also provides an option to export the Excel file with a custom file name: define the desired `FileName` and pass it as an argument to the [`ExportToExcelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExportToExcelAsync_Syncfusion_Blazor_Schedule_ExportOptions_) method. ```cshtml @using Syncfusion.Blazor.Schedule @@ -320,10 +324,12 @@ By default, the Scheduler allows you to download the exported Excel file with a } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBeCNjwMHcfsPBT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + -### Excel file formats +### Excel File Formats -By default, the Scheduler exports event data to an excel file in the `.xlsx` format. You can also export the Scheduler data in either of the file type such as `.xlsx` or `csv` formats, by defining the [`ExportType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_ExportType) option as either `csv` or `xlsx`. By default, the [`ExportType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_ExportType) is set to `xlsx`. +By default, the Scheduler exports event data to an Excel file in the `.xlsx` format. The Scheduler data can also be exported in either `.xlsx` or `csv` formats by defining the [`ExportType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_ExportType) option as either `csv` or `xlsx`. By default, the [`ExportType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_ExportType) is set to `xlsx`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -368,10 +374,11 @@ By default, the Scheduler exports event data to an excel file in the `.xlsx` for } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVeWjtmidvMpuAb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Export with specific date format +### Export with Specific Date Format -You can export the Scheduler data with specific date format, by defining the [`DateFormat`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_DateFormat) option which accepts the MSDN date format in string type. In the following code example, the scheduler appointments are exported in 24 hour date format. +The Scheduler data can be exported with a specific date format by defining the [`DateFormat`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_DateFormat) option which accepts the MSDN date format in string type. In the following code example, the scheduler appointments are exported in 24 hour date format. ```cshtml @using Syncfusion.Blazor.Schedule @@ -416,22 +423,23 @@ You can export the Scheduler data with specific date format, by defining the [`D } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBoCNXGCxbQDWXX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Excel Exporting with Date Format in Blazor Scheduler](images/blazor-scheduler-excel-date-format.png) -### How to customize the excel sheet on before exporting +### How to Customize the Excel Sheet on Before Exporting Customizing an Excel sheet before export is made easy with the [`ExcelExport`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExcelExport) API. This API provides users with robust flexibility to tailor the exported data, format it according to specific needs, and include additional elements for enhanced presentation. With the [`ExcelExport`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExcelExport) API, you can: -- **Adjust the formatting:** Apply specific styles such as font type, size, color, and cell formatting to make the output visually appealing and consistent with your requirements. +- **Adjust the formatting:** Apply specific styles such as font type, size, color, and cell formatting to make the output visually appealing and consistent with requirements. - **Customize headers and footers:** Personalize the Excel sheet by modifying the header and footer content, offering more control over the exported document. -- **Cancel the export:** The API supports cancellation of the export process by setting the `cancel` property to `true`. This feature ensures you can prevent export based on specific conditions, offering you full control over the Excel export workflow. +- **Cancel the export:** The API supports cancellation of the export process by setting the `cancel` property to `true`. This feature ensures prevention of export based on specific conditions, offering full control over the Excel export workflow. -Here’s an example of how you can add a custom header and footer to an Excel sheet before exporting using the [`ExcelExport`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExcelExport) API: +Here’s an example demonstrating how to add a custom header and footer to an Excel sheet before exporting using the [`ExcelExport`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ExcelExport) API: ```cshtml @using Syncfusion.Blazor.Buttons @@ -506,11 +514,11 @@ Here’s an example of how you can add a custom header and footer to an Excel sh } ``` -## Exporting calendar events as ICS file +## Exporting Calendar Events as ICS File -You can export the Scheduler events to a calendar (.ics) file format, and open it on any of the other default calendars such as Google or Outlook. +Scheduler events can be exported to a calendar (.ics) file format and subsequently opened in other default calendar applications such as Google Calendar or Outlook. -To get start quickly about exporting and importing calendar events in our Scheduler, you can check on this video: +For a quick start on exporting and importing calendar events in the Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=YMISOARH8tM-0"%} @@ -559,8 +567,9 @@ The following code example shows how the Scheduler events are exported to a cale } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVIijDwWHEQdptx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Exporting calendar with custom file name +### Exporting Calendar with Custom File Name By default, the calendar is exported with a file name `Calendar.ics`. To change this file name on export, pass the custom string value as [`FileName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ExportOptions.html#Syncfusion_Blazor_Schedule_ExportOptions_FileName) to the method argument so as to get the file downloaded with this provided name. @@ -608,6 +617,7 @@ The following example downloads the iCal file with a name `ScheduleEvents.ics`. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLyCZjwMwthJTMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Importing events from other calendars @@ -681,17 +691,18 @@ The events from external calendars (ICS files) can be imported into Scheduler by } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIMDDGCGiCRWff?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## How to print the Scheduler element +## How to Print the Scheduler Element The Scheduler allows to print the Scheduler element by using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method. The Print method works in two ways. * Using Print method without options. * Using a Print method with options. -### Using PrintAsync method without options +### Using PrintAsync Method Without Options -You can print the Schedule element with the current view by using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method without passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) options. The following example shows how to print the Scheduler using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method without passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) options. +The Scheduler element can be printed with the current view by using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method without passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) options. The following example shows how to print the Scheduler using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method without passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) options. ```cshtml @using Syncfusion.Blazor.Schedule @@ -740,10 +751,11 @@ You can print the Schedule element with the current view by using the [`PrintAsy } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrIstjcsmBWsSOD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Using a PrintAsync method with options +### Using a PrintAsync Method with Options -You can print the Schedule element with customized Width and Height using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method by passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) Height and Width options. The following example shows how to print the Scheduler using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method by passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) options. +The Scheduler element can be printed with customized width and height using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method by passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) Height and Width options. The following example shows how to print the Scheduler using the [`PrintAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync) method by passing the [`PrintOptions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_PrintAsync_Syncfusion_Blazor_Schedule_PrintOptions_) options. ```cshtml @using Syncfusion.Blazor.Schedule @@ -793,3 +805,4 @@ You can print the Schedule element with customized Width and Height using the [` } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjreWttcWwrnTxoJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/scheduler/getting-started-webapp.md b/blazor/scheduler/getting-started-webapp.md index 5d48fcb717..e718ab1eff 100644 --- a/blazor/scheduler/getting-started-webapp.md +++ b/blazor/scheduler/getting-started-webapp.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor Scheduler in Blazor Web App -This section briefly explains about how to include [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component into a Blazor Web App using either [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) -To get start quickly with Blazor Web App Scheduler, you can check on this video: +For a quick start with the Blazor Web App Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=PwjvHHMtL3U"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor Web App Scheduler, you can check on this video: * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## Create a New Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +A **Blazor Web App** can be created using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +The corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) must be configured when creating a Blazor Web Application. ![Create Blazor Web App](images/blazor-create-web-app.png) @@ -38,9 +38,9 @@ You need to configure the corresponding [Interactive render mode](https://learn. To add **Blazor Scheduler** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor components NuGet packages need to be installed within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -61,9 +61,9 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## Create a New Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +A **Blazor Web App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). @@ -81,10 +81,10 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor components NuGet packages need to be installed within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root containing the `.csproj` file. * Run the following command to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -107,7 +107,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -135,13 +135,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory named `BlazorApp` within the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App Here's an example of how to add **Blazor Scheduler** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, Syncfusion® Blazor components NuGet packages need to be installed within the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -174,9 +174,9 @@ Open **~/_Imports.razor** file from the client project and import the `Syncfusio ## Register Syncfusion® Blazor Service -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +The Syncfusion® Blazor Service must be registered in the **~/Program.cs** file of the Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, the Syncfusion® Blazor service must be registered in the **~/Program.cs** files of both the main `server` project and the associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -210,7 +210,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -229,7 +229,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Syncfusion® Blazor Scheduler component @@ -283,13 +283,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler/BlazorWebApp). -## Populating appointments +## Populating Appointments To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html). @@ -334,9 +334,9 @@ To populate the Scheduler with appointments, bind the event data to it by assign {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVyDujgpxNVnpFG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.png)" %} -## Setting date +## Setting Date -The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the two-way binding for [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property. +The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) typically displays the system date as its current date. To change the current date of the Scheduler to a specific date, define the two-way binding for the [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property. {% tabs %} {% highlight razor %} @@ -370,7 +370,9 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched {% endhighlight %} {% endtabs %} -## Setting view +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoCXZcWcHmiTRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Setting Custom Date](images/custom-date.png)" %} + +## Setting View The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are, @@ -419,7 +421,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin {% endhighlight %} {% endtabs %} -## Individual view customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVeMNjQCvjyYFrF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Custom View](images/custom-view.png)" %} + +## Individual View Customization Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`. diff --git a/blazor/scheduler/getting-started-with-maui-app.md b/blazor/scheduler/getting-started-with-maui-app.md index 90a5a33c2e..b839e9bc25 100644 --- a/blazor/scheduler/getting-started-with-maui-app.md +++ b/blazor/scheduler/getting-started-with-maui-app.md @@ -7,11 +7,11 @@ control: Scheduler documentation: ug --- -# Getting Started with Blazor Scheduler component +# Getting Started with Blazor Scheduler Component -This section explains you through the step-by-step process of integrating the Syncfusion® Blazor Schedule component into your Blazor MAUI application using both Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion ® Blazor Schedule component into a Blazor MAUI application using both Visual Studio and Visual Studio Code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) {% tabcontents %} @@ -21,9 +21,9 @@ This section explains you through the step-by-step process of integrating the Sy To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Create a new Blazor MAUI App in Visual Studio +## Create a New Blazor MAUI App in Visual Studio -You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +A Blazor MAUI App can be created using Visual Studio via[Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the app @@ -48,9 +48,9 @@ N> Syncfusion® Blazor components are availa To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -## Create a new Blazor MAUI App in Visual Studio Code +## Create a New Blazor MAUI App in Visual Studio Code -You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +A Blazor MAUI App can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Blazor Schedule and Themes NuGet in the App @@ -125,7 +125,7 @@ namespace MauiBlazorWindow; {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. @@ -139,9 +139,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. -## Add Blazor Scheduler component +## Add Blazor Scheduler Component Add the Syncfusion® Blazor Scheduler component in the **~/Pages/Index.razor** file. @@ -188,11 +188,11 @@ To run the Blazor DataGrid in a Blazor Android MAUI application using the Androi Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. -N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If any errors are encountered while using the Android Emulator, refer to the following link for troubleshooting guidance: [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). ![Blazor Scheduler Component](images/blazor-scheduler.png) -## Populating appointments +## Populating Appointments To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1__ctor). @@ -235,9 +235,9 @@ To populate the Scheduler with appointments, bind the event data to it by assign {% endhighlight %} {% endtabs %} -![Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVyDujgpxNVnpFG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.png)" %} -## Setting date +## Setting Date The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the two-way binding for [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property. @@ -273,7 +273,9 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched {% endhighlight %} {% endtabs %} -## Setting view +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoCXZcWcHmiTRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Setting Custom Date](images/custom-date.png)" %} + +## Setting View The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are, @@ -322,7 +324,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin {% endhighlight %} {% endtabs %} -## Individual view customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVeMNjQCvjyYFrF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Custom View](images/custom-view.png)" %} + +## Individual View Customization Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`. diff --git a/blazor/scheduler/getting-started-with-server-app.md b/blazor/scheduler/getting-started-with-server-app.md index ce505592f7..80606ce5c3 100644 --- a/blazor/scheduler/getting-started-with-server-app.md +++ b/blazor/scheduler/getting-started-with-server-app.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor Scheduler Component in Server App -This section briefly explains about how to include [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component into a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) -To get start quickly with Blazor Scheduler, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: +For a quick start with the Blazor Scheduler, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: {% tabcontents %} @@ -23,13 +23,13 @@ To get start quickly with Blazor Scheduler, you can check on this [GitHub](https * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor Server App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +A **Blazor Server App** can be created using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App -To add **Blazor Scheduler** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor Scheduler** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -50,11 +50,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor Server App in Visual Studio Code -You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +A **Blazor Server App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a server application using the following command in the terminal(Ctrl+`). +Alternatively, a server application can be created using the following command in the terminal(Ctrl+`). {% tabs %} @@ -70,7 +70,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root containing the .csproj file. * Run the following command to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -116,7 +116,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory named `BlazorApp` within the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App @@ -151,7 +151,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: @@ -191,9 +191,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. -## Add Blazor Scheduler component +## Add Blazor Scheduler Component Add the Syncfusion® Blazor Scheduler component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. @@ -235,11 +235,11 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %} -## Populating appointments +## Populating Appointments To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1__ctor). @@ -320,7 +320,9 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched {% endhighlight %} {% endtabs %} -## Setting view +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoCXZcWcHmiTRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Setting Custom Date](images/custom-date.png)" %} + +## Setting View The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are, @@ -369,7 +371,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin {% endhighlight %} {% endtabs %} -## Individual view customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVeMNjQCvjyYFrF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Custom View](images/custom-view.png)" %} + +## Individual View Customization Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`. diff --git a/blazor/scheduler/getting-started.md b/blazor/scheduler/getting-started.md index 53113178bb..21a17c7d9a 100644 --- a/blazor/scheduler/getting-started.md +++ b/blazor/scheduler/getting-started.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor Scheduler Component in WASM App -This section briefly explains about how to include [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview) -To get start quickly with Blazor Scheduler, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: +For a quick start with the Blazor Scheduler, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample: {% tabcontents %} @@ -23,13 +23,13 @@ To get start quickly with Blazor Scheduler, you can check on this [GitHub](https * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +A **Blazor WebAssembly App** can be created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App -To add **Blazor Scheduler** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor Scheduler** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -50,11 +50,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor WASM Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +A **Blazor WebAssembly App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor WASM Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application can be created using the following command in the terminal(Ctrl+`). {% tabs %} @@ -70,7 +70,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root, where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -116,7 +116,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory named `BlazorApp` within the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor Schedule and Themes NuGet in the App @@ -153,7 +153,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +The Syncfusion® Blazor Service must be registered in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -177,21 +177,24 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet references within the `` section and script references in `` section of the **~/index.html** file. ```html .... + +.... + + .... - //Blazor Scheduler Component script reference. - + ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. -## Add Blazor Scheduler component +## Add Blazor Scheduler Component Add the Syncfusion® Blazor Scheduler component in the **~/Pages/Index.razor** file. @@ -226,11 +229,11 @@ Add the Syncfusion® Blazor Scheduler compon {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Scheduler component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %} -## Populating appointments +## Populating Appointments To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1__ctor). @@ -275,7 +278,7 @@ To populate the Scheduler with appointments, bind the event data to it by assign {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVyDujgpxNVnpFG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.png)" %} -## Setting date +## Setting Date The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the two-way binding for [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property. @@ -311,7 +314,9 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched {% endhighlight %} {% endtabs %} -## Setting view +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoCXZcWcHmiTRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Setting Custom Date](images/custom-date.png)" %} + +## Setting View The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are, @@ -360,7 +365,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin {% endhighlight %} {% endtabs %} -## Individual view customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVeMNjQCvjyYFrF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler with Custom View](images/custom-view.png)" %} + +## Individual View Customization Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`. diff --git a/blazor/scheduler/header-bar.md b/blazor/scheduler/header-bar.md index 83df66b259..5859f04864 100644 --- a/blazor/scheduler/header-bar.md +++ b/blazor/scheduler/header-bar.md @@ -45,12 +45,12 @@ By default, the header bar holds the date and view navigation options, through w } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXheMjDwBMlgmvkx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Hide Header Bar in Blazor Scheduler](images/blazor-scheduler-hide-header-bar.png) -## How to display the view options within the header bar popup +## How to Display the View Options Within the Header Bar Popup -By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnableAdaptiveUI) property. +By default, the header bar holds the view navigation options, through which users can switch between various views. These view options can be moved to the header bar popup by setting [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnableAdaptiveUI) property to `true`. ```cshtml @using Syncfusion.Blazor.Schedule @@ -87,6 +87,7 @@ By default, the header bar holds the view navigation options, through which the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLeCNDGrsECEgvg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} The Scheduler with view options within the header bar popup will be rendered as shown in the following image. @@ -94,9 +95,9 @@ The Scheduler with view options within the header bar popup will be rendered as N> Refer [here](./resources#adaptive-ui-in-desktop) to know more about adaptive UI in resources scheduler. -## Date header customization +## Date Header Customization -The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler using [`DateHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate ). The [`DateHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) option is used to customize the date header cells of day, week and work-week views. +The Scheduler UI elements that display date text on all views are considered date header cells. The date header cells of the Scheduler can be customized using [`DateHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate ). The [`DateHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) option is used to customize the date header cells of day, week and work-week views. ```cshtml @using Syncfusion.Blazor.Schedule @@ -188,10 +189,11 @@ The Scheduler UI that displays the date text on all views are considered as the } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXresNXcVrCRAiQr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Date Header Customization in Blazor Scheduler](images/blazor-scheduler-customize-dateheader.png) -### Customization using OnRenderCell event +### Customization Using OnRenderCell Event The date header can 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` returns the `ElementType` as `DateHeader` when the date header is rendering. @@ -245,12 +247,13 @@ The date header can be customized by using [`OnRenderCell`](https://help.syncfus } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrSMtjwrBVLWhdy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the date range text +## Customizing the Date Range Text -The [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) option to override the default text and specify your own custom text to be displayed. +The [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) option allows customization of the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, the `dateRangeTemplate` option can be used to override the default text and specify custom text to be displayed. -The [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) property includes `startDate`, `endDate` and `currentView` options, you can customize the date range text using these available options. +The [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) property includes `startDate`, `endDate` and `currentView` options, allowing for customization of the date range text. ```cshtml @using Syncfusion.Blazor.Schedule @@ -288,7 +291,9 @@ The [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } ``` -## TimelineYear header customization +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSCjNcVVBHxWVS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Timeline Year Header Customization The day header cells and month header cells can be customized in the TimelineYear view of the Scheduler using [`DayHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DayHeaderTemplate) and [`MonthHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_MonthHeaderTemplate). The [`DayHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DayHeaderTemplate) option is used to customize the day header cells of the TimelineYear view in both Vertical and Horizontal orientations. The [`MonthHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_MonthHeaderTemplate) option is used to customize the month header cells of the TimelineYear view in both Vertical and Horizontal orientations. @@ -349,8 +354,10 @@ The day header cells and month header cells can be customized in the TimelineYea } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrosNDwVhgcoJce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Timeline year Header Customization in Blazor Scheduler](images/timeline-year.png) -## Customizing header indent cells +## Customizing Header Indent Cells It is possible to customize the header indent cells using the [`HeaderIndentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_HeaderIndentTemplate) option and change the look and appearance in both the vertical and timeline views. In vertical views, the header indent cells can be customized at the hierarchy level and the resource header left indent cell can be customized in timeline views using the template option. @@ -469,3 +476,5 @@ It is possible to customize the header indent cells using the [`HeaderIndentTemp } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBIsXjGVLeJvJhk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Header Indent cells Customization in Blazor Scheduler](images/header-indent-customization.png) diff --git a/blazor/scheduler/header-rows.md b/blazor/scheduler/header-rows.md index 0cff7805fa..e9bac3b90c 100644 --- a/blazor/scheduler/header-rows.md +++ b/blazor/scheduler/header-rows.md @@ -17,7 +17,7 @@ The Timeline views can have additional header rows other than its default date a * `Date` * `Hour` -To get start quickly on customizing the header rows of timeline views on scheduler, you can check on this video: +For a quick start on customizing the header rows of timeline views in the Scheduler, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=2eYGFgwqK6U"%} @@ -56,10 +56,11 @@ N> The `Hour` row is not applicable for Timeline month view. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVoCXtQhVQXFVrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Timeline Header Rows in Blazor Scheduler](images/blazor-scheduler-headerrow-default.png) -## Display year and month rows in timeline views +## Display Year and Month Rows in Timeline Views To display the timeline Scheduler simply with year and month names alone, define the option `Year` and `Month` within the [`ScheduleHeaderRow`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleHeaderRows.html) property. @@ -91,10 +92,12 @@ To display the timeline Scheduler simply with year and month names alone, define } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLeWtDcBLQyVaZY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Display Year and Month rows in Blazor Scheduler timeline views](images/blazor-scheduler-headerrow-month-year.png) -## Display week numbers in timeline views +## Display Week Numbers in Timeline Views + The week number can be displayed in a separate header row of the timeline Scheduler by setting `Week` option within [`ScheduleHeaderRow`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleHeaderRows.html) property. @@ -128,12 +131,13 @@ The week number can be displayed in a separate header row of the timeline Schedu } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLoWNDwhLQaQXmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Display Week numbers in Blazor Scheduler timeline views](images/blazor-scheduler-headerrow-weeknumber.png) -## Timeline view displaying dates of a complete year +## Timeline View Displaying Dates of a Complete Year -It is possible to display a complete year in a timeline view by setting `Interval` value as 12 and defining **TimelineMonth** view option within the [`ScheduleView`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleViews.html) tag helper. +A complete year can be displayed in a timeline view by setting the`Interval` value as 12 and defining **TimelineMonth** view option within the [`ScheduleView`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleViews.html) tag helper. ```cshtml @using Syncfusion.Blazor.Schedule @@ -163,10 +167,11 @@ It is possible to display a complete year in a timeline view by setting `Interva } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSiZtcVhbgOtNW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Display dates of a complete year in Blazor Scheduler timeline views](images/blazor-scheduler-headerrow-dates.png) -## Customizing the header rows using template +## Customizing the Header Rows Using Template The text of the header rows can be customized and display any images or format text on each individual header rows using the built-in [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleHeaderRow.html#Syncfusion_Blazor_Schedule_ScheduleHeaderRow_Template) option available within the [`ScheduleHeaderRow`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleHeaderRow.html). @@ -225,5 +230,6 @@ The text of the header rows can be customized and display any images or format t } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSiZjmrhbbkwHJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Display customize header rows using template in Blazor Scheduler](images/blazor-scheduler-headerrow-custom-header.png) \ No newline at end of file diff --git a/blazor/scheduler/images/cell-quickpopup.png b/blazor/scheduler/images/cell-quickpopup.png new file mode 100644 index 0000000000..819494870d Binary files /dev/null and b/blazor/scheduler/images/cell-quickpopup.png differ diff --git a/blazor/scheduler/images/custom-date.png b/blazor/scheduler/images/custom-date.png new file mode 100644 index 0000000000..adad0ae07f Binary files /dev/null and b/blazor/scheduler/images/custom-date.png differ diff --git a/blazor/scheduler/images/custom-view.png b/blazor/scheduler/images/custom-view.png new file mode 100644 index 0000000000..73aff127a1 Binary files /dev/null and b/blazor/scheduler/images/custom-view.png differ diff --git a/blazor/scheduler/images/editor-template.png b/blazor/scheduler/images/editor-template.png new file mode 100644 index 0000000000..3638bac810 Binary files /dev/null and b/blazor/scheduler/images/editor-template.png differ diff --git a/blazor/scheduler/images/header-indent-customization.png b/blazor/scheduler/images/header-indent-customization.png new file mode 100644 index 0000000000..57adfc3f55 Binary files /dev/null and b/blazor/scheduler/images/header-indent-customization.png differ diff --git a/blazor/scheduler/images/height-width-inpixel.png b/blazor/scheduler/images/height-width-inpixel.png new file mode 100644 index 0000000000..b23e22a6d6 Binary files /dev/null and b/blazor/scheduler/images/height-width-inpixel.png differ diff --git a/blazor/scheduler/images/timeline-year.png b/blazor/scheduler/images/timeline-year.png new file mode 100644 index 0000000000..3d1f1b4c53 Binary files /dev/null and b/blazor/scheduler/images/timeline-year.png differ diff --git a/blazor/scheduler/localization.md b/blazor/scheduler/localization.md index 6c2f7323f3..4475bbe318 100644 --- a/blazor/scheduler/localization.md +++ b/blazor/scheduler/localization.md @@ -11,7 +11,7 @@ documentation: ug [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. -## Setting date format +## Setting Date Format Scheduler can be used with all valid date formats and by default it follows the universal date format "MM/dd/yyyy". If the [`DateFormat`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_DateFormat) property is not specified particularly, then it will work based on the system's local culture. As the system's local culture is "en-US", this makes it to follow the "MM/dd/yyyy" pattern. @@ -43,10 +43,11 @@ Scheduler can be used with all valid date formats and by default it follows the } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBosttmhrOFrwLT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Date Format in Blazor Scheduler](images/blazor-scheduler-dateformat.png) -## Time mode +## Time Mode The time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the system's local culture and also the Scheduler supported to customize the time mode using the [`TimeFormat`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_TimeFormat) property. @@ -79,10 +80,11 @@ The time mode of the Scheduler can be either 12 or 24 hours format which is comp } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhICZjwVgtKPLLD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Time Format in Blazor Scheduler](images/blazor-scheduler-timeformat.png) -## Displaying Scheduler in RTL mode +## Displaying Scheduler in RTL Mode The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnableRtl) to `true`. By doing so, the Scheduler will display its usual layout from right to left. It's default value is `false`. @@ -115,9 +117,10 @@ The Scheduler layout and its behavior can be changed as per the common RTL (Righ } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyCXNQLKWXTXRn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![RTL Mode in Blazor Scheduler](images/blazor-scheduler-rtl.png) -## See also +## See Also * [How to change first day of the week in the Scheduler](./working-hours#setting-start-day-of-the-week) \ No newline at end of file