documentation(EJ2-000): source update from ej2-schedule-angular-docs
This commit is contained in:
Родитель
ef3c66460a
Коммит
8219023833
|
@ -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)
|
||||
|
|
Загрузка…
Ссылка в новой задаче