Integrated latest changes at 03-31-2023 12:19:45 PM

Author: SyncfusionBuild

ej2-angular/code-snippet/chart/series/rangesteparea-cs1/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
 import { AreaSeriesService, RangeAreaSeriesService, StepAreaSeriesService, StackingAreaSeriesService, 
-    DateTimeService, CategoryService, MultiColoredAreaSeriesService, StackingStepAreaSeriesService, SplineRangeAreaSeriesService } from '@syncfusion/ej2-angular-charts';
+    DateTimeService, CategoryService, MultiColoredAreaSeriesService, StackingStepAreaSeriesService, SplineRangeAreaSeriesService, RangeStepAreaSeriesService } from '@syncfusion/ej2-angular-charts';
 
 /**
  * Module

ej2-angular/code-snippet/chart/user-interaction/centerlable-cs1/app/app.component.ts

@@ -4,25 +4,23 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     selector: 'app-container',
     template:
-        `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
+        `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [centerLabel]='centerLabel'>
         <e-accumulation-series-collection>
-            <e-accumulation-series [dataSource]='centerLabel' xName='x' yName='y' innerRadius='65%' [centerLabel]='centerLabel'></e-accumulation-series>
+            <e-accumulation-series [dataSource]='centerLabelData' xName='x' yName='y' innerRadius='65%'></e-accumulation-series>
         </e-accumulation-series-collection>
     </ejs-accumulationchart>`
 })
 export class AppComponent implements OnInit {
     public piedata: Object[];
     public legendSettings: Object;
-    public centerLabel: Object = [
-        { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
-        { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
-        { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
-        { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
-        { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
-        { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
-        { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
-        { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
-        { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+    public centerLabel: Object;
+    public centerLabelData: Object = [
+        { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
+        { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
+        { x: 'Edge', y: 5.0, text: 'Edge: 5.00%' },
+        { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
+        { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
+        { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
     ];
     ngOnInit(): void {
         this.legendSettings = {

ej2-angular/code-snippet/chart/user-interaction/centerlable-cs2/app/app.component.ts

@@ -4,16 +4,17 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     selector: 'app-container',
     template:
-        `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
+        `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [centerLabel]='centerLabel'>
         <e-accumulation-series-collection>
-            <e-accumulation-series [dataSource]='centerLabel' xName='x' yName='y' innerRadius='65%' [centerLabel]='centerLabel'></e-accumulation-series>
+            <e-accumulation-series [dataSource]='centerLabelData' xName='x' yName='y' innerRadius='65%'></e-accumulation-series>
         </e-accumulation-series-collection>
     </ejs-accumulationchart>`
 })
 export class AppComponent implements OnInit {
     public piedata: Object[];
     public legendSettings: Object;
-    public centerLabel: Object = [
+    public centerLabel: Object;
+    public centerLabelData: Object = [
         { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
         { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
         { x: 'Edge', y: 5.0, text: 'Edge: 5.00%' },

ej2-angular/code-snippet/chart/user-interaction/centerlable-cs3/app/app.component.ts

@@ -5,16 +5,17 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     selector: 'app-container',
     template:
-    `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
+    `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [centerLabel]='centerLabel'>
         <e-accumulation-series-collection>
-            <e-accumulation-series [dataSource]='centerLabel' xName='x' yName='y' innerRadius='65%' [centerLabel]='centerLabel'></e-accumulation-series>
+            <e-accumulation-series [dataSource]='centerLabelData' xName='x' yName='y' innerRadius='65%' ></e-accumulation-series>
         </e-accumulation-series-collection>
     </ejs-accumulationchart>`
 })
 export class AppComponent implements OnInit {
     public piedata: Object[];
     public legendSettings: Object;
-    public centerLabel: Object= [
+    public centerLabel: Object;
+    public centerLabelData: Object= [
         { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
         { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
         { x: 'Edge', y: 5.0, text: 'Edge: 5.00%' },
@@ -28,6 +29,7 @@ export class AppComponent implements OnInit {
         };
         this.centerLabel = {
             text : 'Mobile<br>Browsers<br>Statistics',
+            hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
             textStyle:{
                 fontWeight: '900',
                 size: '15px',

ej2-angular/schedule/appointments.md

@@ -186,6 +186,8 @@ In this example, a recurring instance that displays on the date 30th Jan 2018 an
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs7" %}
 
+![Editing Events](images/schedule-editing-events.png)
+
 ### Recurrence options and rules
 
 Events can be repeated on a daily, weekly, monthly or yearly basis based on the recurrence rule which accepts the string value. The following details should be assigned to the `recurrenceRule` property to generate the recurring instances.
@@ -383,6 +385,8 @@ By default, the scheduler will render the overlapping events based on the start
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs11" %}
 
+![Overlapping Events](images/schedule-overlapping-events.png)
+
 ## Drag and drop appointments
 
 Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality, it is necessary to inject the module `DragAndDrop` and make sure that `allowDragAndDrop` is set to true on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location.
@@ -812,6 +816,8 @@ It is possible to block a set of dates or a particular time ranges on the Schedu
 
 {% previewsample "page.domainurl/code-snippet/schedule/event-cs11" %}
 
+![Block Date and Time](images/schedule-block-events.png)
+
 Block events can also be defined to repeat on several days as shown in the following code example.
 
 {% tabs %}
@@ -828,6 +834,8 @@ Block events can also be defined to repeat on several days as shown in the follo
 
 {% previewsample "page.domainurl/code-snippet/schedule/event-cs12" %}
 
+![Block Several Date and Time](images/schedule-multiple-block-events.png)
+
 ## Readonly
 
 An interaction with the appointments of Scheduler can be enabled/disabled using the `readonly` property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as `false`.
@@ -922,6 +930,8 @@ We can show more indicator if more than one appointment is available in a same c
 
 {% previewsample "page.domainurl/code-snippet/schedule/event-cs17" %}
 
+![Differentiate Past Time Events](images/schedule-appointments-entirecell.png)
+
 ## Display tooltip for appointments
 
 The tooltip shows the Scheduler appointment's information in a formatted style by making use of the tooltip related options.
@@ -944,6 +954,8 @@ The tooltip can be displayed for appointments by setting `true` to the `enableTo
 
 {% previewsample "page.domainurl/code-snippet/schedule/event-cs18" %}
 
+![Built-in Tooltip](images/schedule-appointments-tooltip.png)
+
 ### Customizing event tooltip using template
 
 After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the `tooltipTemplate` option within the `eventSettings`.
@@ -965,6 +977,8 @@ After enabling the default tooltip, it is possible to customize the display of n
 
 {% previewsample "page.domainurl/code-snippet/schedule/tooltip-cs1" %}
 
+![Tooltip](images/schedule-appointments-tooltip-template.png)
+
 > All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the `eventSettings` can be accessed within the template.
 
 ## Appointment filtering

ej2-angular/schedule/cell-customization.md

@@ -30,6 +30,8 @@ The height and width of the Scheduler cells can be customized either to increase
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs21" %}
 
+![Cell Dimensions in Vertical Views](images/schedule-celldimension-verticalviews.png)
+
 ## Check for cell availability
 
 You can check whether the given time range slots are available for event creation or already occupied by other events using the `isSlotAvailable` method. In the following code example, if a specific time slot already contains an appointment, then no more appointments can be added to that cell.
@@ -70,6 +72,8 @@ The `cellTemplate` option accepts the template string and is used to customize t
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs23" %}
 
+![Using CellTemplate](images/schedule-celldimension-celltemplate.png)
+
 ### Using renderCell event
 
 An alternative to `cellTemplate` is the `renderCell` event, which can also be used to customize the cells with appropriate images or formatted text values.

ej2-angular/schedule/context-menu.md

@@ -35,4 +35,6 @@ The deletion of appointments can be done by using the `deleteEvent` public metho
 
 {% previewsample "page.domainurl/code-snippet/schedule/context-menu-cs1" %}
 
+![Context Menu](images/schedule-contextmenu.png)
+
 > You can refer to our [Angular Scheduler](https://www.syncfusion.com/angular-ui-components/angular-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Scheduler example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/overview) to knows how to present and manipulate data.

ej2-angular/schedule/editor-template.md

@@ -38,6 +38,8 @@ You can change the header title and the text of buttons displayed at the footer
 
 {% previewsample "page.domainurl/code-snippet/schedule/editor-window-cs1" %}
 
+![Editing Window with Custom Local Words](images/schedule-editing-local-word.png)
+
 ### How to change the label text of default editor fields
 
 To change the default labels such as Subject, Location and other field names in the editor window, make use of the `title` property available within the field option of `eventSettings`.
@@ -56,6 +58,8 @@ To change the default labels such as Subject, Location and other field names in
 
 {% previewsample "page.domainurl/code-snippet/schedule/editor-window-cs2" %}
 
+![Editor Window with Custom Label](images/schedule-custom-label.png)
+
 ### Field validation
 
 It is possible to validate the required fields of the editor window from client-side before submitting it, by adding appropriate validation rules to each field. The appointment fields have been extended to accept both `string` and `object` type values. To perform validations, it is necessary to specify object values for the event fields.
@@ -74,6 +78,8 @@ It is possible to validate the required fields of the editor window from client-
 
 {% previewsample "page.domainurl/code-snippet/schedule/editor-window-cs3" %}
 
+![Editor window with Validation](images/schedule-validation.png)
+
 > Applicable validation rules can be referred from [form validation](http://ej2.syncfusion.com/documentation/form-validator/#validation-rules) documentation.
 
 ### Add additional fields to the default editor
@@ -261,6 +267,8 @@ The resource field can be added within editor template with multiselect control
 
 {% previewsample "page.domainurl/code-snippet/schedule/resource-field-cs1" %}
 
+![Add Resource Options within Editor Template](images/schedule-custom-window-with-resource.png)
+
 ### How to add recurrence options within editor template
 
 The following code example shows how to add recurrence options within the editor template by importing `RecurrenceEditor`.
@@ -279,6 +287,8 @@ The following code example shows how to add recurrence options within the editor
 
 {% previewsample "page.domainurl/code-snippet/schedule/resource-field-cs2" %}
 
+![Add Recurrence Options within Editor Template](images/schedule-custom-window-with-recurrence.png)
+
 ### Apply validations on editor template fields
 
 In the following code example, validation has been added to the status field.
@@ -297,6 +307,8 @@ In the following code example, validation has been added to the status field.
 
 {% previewsample "page.domainurl/code-snippet/schedule/resource-field-cs3" %}
 
+![Editor Template with Validation](images/schedule-custom-window-validation.png)
+
 ### How to save the customized event editor using template
 
 The **e-field** class is not added to each field defined within the template, so you should allow to set those field values externally by using the `popupClose` event.
@@ -455,6 +467,8 @@ The following code example shows how to disable the display of such popups while
 
 {% previewsample "page.domainurl/code-snippet/schedule/editor-window-cs11" %}
 
+![More Event Popup](images/schedule-more-event-popup.png)
+
 ### How to customize the popup that opens on more indicator
 
 The following code example shows you how to customize the default more indicator popup in which number of events rendered count on the day has been shown in the header.

ej2-angular/schedule/exporting.md

@@ -32,6 +32,8 @@ The Scheduler allows you to export all its events into an Excel format file by u
 
 {% previewsample "page.domainurl/code-snippet/schedule/excel-export-cs1" %}
 
+![Excel Exporting](images/schedule-excel-export.png)
+
 ### Exporting with custom fields
 
 By default, Scheduler exports all the default event fields that are mapped to it through the `eventSettings` 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` through the `ExportOptions` interface and pass it as argument to the `exportToExcel` method as shown in the following example. For example: `['Id', 'Subject', 'StartTime', 'EndTime', 'Location']`.
@@ -50,6 +52,8 @@ By default, Scheduler exports all the default event fields that are mapped to it
 
 {% previewsample "page.domainurl/code-snippet/schedule/excel-export-cs2" %}
 
+![Excel Exporting with custom Fields](images/schedule-excel-export-custom-fields.png)
+
 ### 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` option as `true` through the `ExportOptions` interface and pass it as argument to the `exportToExcel` method. By default, the `includeOccurrences` option is set to `false`.
@@ -106,6 +110,8 @@ Using fields property, we can only export the defined fields into excel without
 
 {% previewsample "page.domainurl/code-snippet/schedule/excel-export-cs5" %}
 
+![Excel Exporting with custom header texts](images/schedule-excel-export-custom-header.png)
+
 ### 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, by defining the desired `fileName` through the `ExportOptions` interface and passing it as an argument to the `exportToExcel` method.

ej2-angular/schedule/header-bar.md

@@ -30,6 +30,8 @@ By default, the header bar holds the date and view navigation options, through w
 
 {% previewsample "page.domainurl/code-snippet/schedule/header-bar-cs1" %}
 
+![Hide Header Bar](images/schedule-hide-header-bar.png)
+
 ## Customizing header bar
 
 Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the `actionBegin` event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person's short profile information.
@@ -66,6 +68,8 @@ By default, the header bar holds the view navigation options, through which the
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs38" %}
 
+![Displaying Header Bar Popup](images/schedule-header-bar-popup.png)
+
 > Refer [here](./resources/#adaptive-ui-in-desktop) to know more about adaptive UI in resources scheduler.
 
 ## Date header customization
@@ -90,6 +94,8 @@ The `dateHeaderTemplate` option is used to customize the date header cells of da
 
 {% previewsample "page.domainurl/code-snippet/schedule/header-bar-cs3" %}
 
+![Date Header Customization](images/schedule-customize-dateheader.png)
+
 ### Using renderCell event
 
 In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the `renderCell` event.

ej2-angular/schedule/header-rows.md

@@ -40,6 +40,8 @@ The following example shows the Scheduler displaying all the available header ro
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs39" %}
 
+![Timeline Header Rows](images/schedule-headerrow-default.png)
+
 ## 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 `headerRows` property.
@@ -58,6 +60,8 @@ To display the timeline Scheduler simply with year and month names alone, define
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs40" %}
 
+![Display Year and Month rows in timeline views](images/schedule-headerrow-month-year.png)
+
 ## 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 `headerRows` property.
@@ -76,6 +80,8 @@ The week number can be displayed in a separate header row of the timeline Schedu
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs41" %}
 
+![Display Week numbers in timeline views](images/schedule-headerrow-weeknumber.png)
+
 ## 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 `views` property of Scheduler.
@@ -94,6 +100,8 @@ It is possible to display a complete year in a timeline view by setting `interva
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs42" %}
 
+![Display dates of a complete year in timeline views](images/schedule-headerrow-dates.png)
+
 ## Customizing the header rows using template
 
 You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in `template` option available within the `headerRows` property.
@@ -112,4 +120,6 @@ You can customize the text of the header rows and display any images or formatte
 
 {% previewsample "page.domainurl/code-snippet/schedule/default-cs43" %}
 
+![Display customize header rows using template](images/schedule-headerrow-custom-header.png)
+
 > You can refer to our [Angular Scheduler](https://www.syncfusion.com/angular-ui-components/angular-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Scheduler example](https://ej2.syncfusion.com/angular/demos/#/material/schedule/overview) to knows how to present and manipulate data.