documentation(EJ2-000): source update from ej2-schedule-angular-docs

This commit is contained in:
essentialjs2 2021-07-16 13:18:32 +00:00
Родитель ef3c66460a
Коммит 8219023833
30 изменённых файлов: 132 добавлений и 18 удалений

Просмотреть файл

@ -52,4 +52,6 @@ Keys | Description |
| <kbd>Left</kbd> or <kbd>Right Arrow</kbd> | On pressing any of these keys, when focus is currently on the Schedule header bar, moves the focus to the previous or next items in the header bar. |
| <kbd>Space</kbd> or <kbd>Enter</kbd> | It activates any of the focused items. |
| <kbd>Page Up</kbd> & <kbd>Page Down</kbd> | To scroll through the work cells area. |
| <kbd>Home</kbd> | To move the selection to the first cell of Scheduler. |
| <kbd>Home</kbd> | To move the selection to the first cell of Scheduler. |
> 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.

Просмотреть файл

@ -1910,4 +1910,6 @@ If your requirement is to simply refresh the appointments instead of refreshing
```typescript
this.scheduleObj.refreshEvents();
```
```
> 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.

Просмотреть файл

@ -80,4 +80,6 @@ export class AppComponent {
}
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -338,4 +338,6 @@ export class AppComponent {
## How to disable multiple cell and row selection in Schedule
By default, the `allowMultiCellSelection` and `allowMultiRowSelection` properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties.
By default, the `allowMultiCellSelection` and `allowMultiRowSelection` properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties.
> 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.

Просмотреть файл

@ -162,3 +162,5 @@ export class AppComponent {
```
{% endtab %}
> 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.

Просмотреть файл

@ -886,3 +886,5 @@ export class AppComponent {
```
{% endtab %}
> 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.

Просмотреть файл

@ -443,4 +443,6 @@ export class AppComponent {
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -93,6 +93,8 @@ export class AppComponent {
{% endtab %}
> 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.
## See Also
* [How to Change Scheduler Cell Dimensions](./cell-customization/#setting-cell-dimensions-in-all-views)

Просмотреть файл

@ -1437,4 +1437,6 @@ export class AppComponent {
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -181,4 +181,6 @@ Get resource details using index | Not applicable | **Method:** *getResourceByIn
| Fires on resize start | **Event:** *resizeStart* <br/><br/> `<ej-schedule #schedule (resizeStart) = "onResizeStart($event)">`<br>`</ej-schedule>`<br> **TS** <br>`onResizeStart(e: any){}`| **Event:** *resizeStart* <br/><br/> `<ejs-schedule (resizeStart) ='onResizeStart($event)'>`<br>`</ejs-schedule>`<br> **TS** <br>`onResizeStart(args: any): void{}` |
| Fires on resize stop | **Event:** *resizeStop* <br/><br/> `<ej-schedule #schedule (resizeStop) = "onResizeStop($event)">`<br>`</ej-schedule>`<br> **TS** <br>`onResizeStop(e: any){}`| **Event:** *resizeStop* <br/><br/> `<ejs-schedule (resizeStop) ='onResizeStop($event)'>`<br>`</ejs-schedule>`<br> **TS** <br>`onResizeStop(args: any): void{}` |
| Fires on rendering of every scheduler elements | **Event:** *queryCellInfo* <br/><br/> `<ej-schedule #schedule (queryCellInfo) = "onQueryCellInfo($event)">`<br>`</ej-schedule>`<br> **TS** <br>`onQueryCellInfo(e: any){}`| **Event:** *renderCell* <br/><br/> `<ejs-schedule (renderCell) ='onRenderCell($event)'>`<br>`</ejs-schedule>`<br> **TS** <br>`onRenderCell(args: any): void{}` |
| Fires before the event rendering on UI | Not applicable | **Event:** *eventRendered* <br/><br/> `<ejs-schedule (eventRendered) ='onEventRendered($event)'>`<br>`</ejs-schedule>`<br> **TS** <br>`onEventRendered(args: any): void{}` |
| Fires before the event rendering on UI | Not applicable | **Event:** *eventRendered* <br/><br/> `<ejs-schedule (eventRendered) ='onEventRendered($event)'>`<br>`</ejs-schedule>`<br> **TS** <br>`onEventRendered(args: any): void{}` |
> 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.

Просмотреть файл

@ -555,4 +555,6 @@ export class AppComponent {
}
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -6,7 +6,7 @@ description: "This article demonstrates how to create a simple Scheduler and con
# Getting Started
This section briefly explains how to create **Scheduler** component and configure its available functionalities in Angular Environment.
This section briefly explains how to create [**Angular Scheduler**](https://www.syncfusion.com/angular-ui-components/angular-scheduler) component and configure its available functionalities in Angular Environment.
To get start quickly with Angular Scheduler using CLI and Schematics, you can check on this video:
@ -279,4 +279,6 @@ export class AppComponent {
}
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -289,4 +289,6 @@ export class AppComponent {
}
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -217,4 +217,6 @@ export class AppComponent {
}
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -0,0 +1,57 @@
---
title: "Scheduler Year view customization"
component: "Scheduler"
description: "This section explains how to customize the Year view using different properties in scheduler"
---
# Half-yearly view
The year view of our scheduler displays all the 365 days and their related appointments of a particular year. You can customize the year view by using the following properties.
* [`firstMonthOfYear`](../../api/schedule#firstmonthofyear)
* [`monthsCount`](../../api/schedule#monthscount)
* [`monthHeaderTemplate`](../../api/schedule#monthheadertemplate)
In the following code example, you can see how to render only the last six months of a year in the scheduler. To start with the month of June, `firstMonthYear` is set to 6 and `monthsCount` is set to 6 to render only 6 months.
{% tab template="schedule/year-customizations", sourceFiles="app/**/*.ts,app/app.component.html,app/index.css", iframeHeight="588px" %}
```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import {
ScheduleComponent, EventSettingsModel, EventRenderedArgs, YearService, TimelineYearService, GroupModel, ResizeService, DragAndDropService
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource.ts';
@Component({
selector: 'app-root',
templateUrl: 'app/app.component.html',
providers: [YearService, TimelineYearService, ResizeService, DragAndDropService],
styleUrls: ['app/index.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public selectedDate: Date = new Date(2021, 7, 4);
public firstMonthOfYear: number = 6;
public monthsCount: number = 6;
public eventSettings: EventSettingsModel = {
dataSource: resourceData
};
public group: GroupModel = {
resources: ['Owners']
};
public ownerDataSource: Object[] = [
{ OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Robert', Id: 3, OwnerColor: '#7499e1' },
{ OwnerText: 'Smith', Id: 4, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 5, OwnerColor: '#f8a398' }
];
public getMonthHeaderText(date: Date): string {
return date.toLocaleString('en-us', { month: 'long' }) + ' ' + date.getFullYear();
}
}
```
{% endtab %}

Просмотреть файл

@ -44,3 +44,5 @@ add/edit/delete the appointments, navigate to other views or dates and much more
Watch the overview of Angular Scheduler features from this video:
`youtube:WnBjPXPGmnw`
> 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.

Просмотреть файл

@ -428,6 +428,8 @@ export class AppComponent {
{% endtab %}
> 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.
## See Also
* [How to change first day of the week in the Scheduler](./working-days/#setting-start-day-of-the-week)

Просмотреть файл

@ -36,4 +36,6 @@ The required modules should be injected into the Scheduler using the `@NgModule.
})
```
> If a Scheduler `currentView` is set to any one of the available views without injecting that respective view module, then a script error will occur and the Scheduler will not render.
**Note:** If a Scheduler `currentView` is set to any one of the available views without injecting that respective view module, then a script error will occur and the Scheduler will not render.
> 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.

Просмотреть файл

@ -231,4 +231,6 @@ export class AppComponent implements OnInit {
}
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -1241,3 +1241,5 @@ export class AppComponent {
```
{% endtab %}
> 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.

Просмотреть файл

@ -139,3 +139,5 @@ export class AppComponent {
```
{% endtab %}
> 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.

Просмотреть файл

@ -21,3 +21,5 @@ The following table describes the Scheduler actions and also illustrates how tho
| Tooltip | Hover the mouse pointer over the events or resource header and the tooltip will be displayed. | Tap holding the events will open the tooltip on events. |
| Open editor window | Double click on cells or events to open the editor window. | Double click on cells or events to open the editor window. Single tap on cells, which displays a `+` icon on the cell. Now, tap on it again to open the new event editor window. To open the editor on events, single tap on it and then click on the edit icon to open the editor window in `Edit` mode. |
| Open quick info popup | Single clicking on a cell will open a quick popup prompting for new event creation. Single clicking on an event will open a popup displaying event information along with the option to edit and delete it. | No quick info popup is available while single tapping on cells. Single tapping on events, opens the popup showing event information. |
> 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.

Просмотреть файл

@ -46,4 +46,6 @@ To modify the Scheduler appearance, you need to override the default CSS of Sche
| .e-schedule .e-timeline-view .e-resource-cells | Resource cells in timeline views of scheduler. |
| .e-schedule .e-timeline-month-view .e-resource-cells| Resource cells in timeline month view of scheduler. |
| e-parent-node | Parent resource cells in timeline views of scheduler. |
| e-child-node | Child resource cells in timeline views of scheduler. |
| e-child-node | Child resource cells in timeline views of scheduler. |
> 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.

Просмотреть файл

@ -33,3 +33,5 @@ export class AppComponent {
```
{% endtab %}
> 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.

Просмотреть файл

@ -29,6 +29,7 @@
* [Set Default Value for Event Fields](schedule/how-to/set-default-value-for-event-fields.md)
* [Open Editor Window Manually](schedule/how-to/open-event-editor-manually.md)
* [Prevent the Date Navigation](schedule/how-to/prevent-date-navigation.md)
* [Show half-yearly view](schedule/how-to/half-yearly-view.md)
* [Set Different Working Hours on Different Days](schedule/how-to/set-different-work-hours.md)
* [Show tooltip with delay](schedule/how-to/show-tool-tip-with-delay.md)
* [Show quick info template](schedule/how-to/quick-info-template.md)

Просмотреть файл

@ -130,4 +130,6 @@ export class AppComponent {
}
```
{% endtab %}
{% endtab %}
> 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.

Просмотреть файл

@ -279,4 +279,6 @@ Returns `Date`
let date: Date = new Date(2018,11,5,15,25,11);
let convertedDate: Date = timezone.removeLocalOffset(date);
console.log(convertedDate); //2018-12-05T15:25:11.000Z
```
```
> 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.

Просмотреть файл

@ -644,3 +644,5 @@ export class AppComponent {
## See Also
* [How to restrict view navigation while clicking on dates](./how-to/prevent-date-navigation)
> 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.

Просмотреть файл

@ -94,4 +94,6 @@ export class AppComponent {
## See Also
* [Virtual scrolling in Agenda view](./views/#agenda-view)
* [Virtual scrolling in Agenda view](./views/#agenda-view)
> 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.

Просмотреть файл

@ -330,6 +330,8 @@ export class AppComponent {
{% endtab %}
> 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.
## See Also
* [To display the current time indicator](./timescale/#highlighting-current-date-and-time)