Скачать или смотреть Customize Editor Window Using Templates of Angular Scheduler

Looking to customize the editor window of Angular Scheduler with your own design? Then watch this quick video to learn how to customize your appointment window using the ng-template option.

If you are new to Angular Scheduler, watch this:    • Create an Angular Scheduler Using the Angu...  
To learn how to add appointments:    • How to Add Appointments to the Angular Eve...  

There is a built-in template option available in Angular Scheduler to customize the default editor window. Simply build and design your own fields and learn how to place them in the editor window using the "editorTemplate" option from this video.

Example: https://ej2.syncfusion.com/angular/de...

To add a resource or recurrence options within the template: https://ej2.syncfusion.com/angular/do...

ANGULAR SCHEDULER
--------------------
Product overview: https://www.syncfusion.com/angular-ui...
Examples: https://ej2.syncfusion.com/angular/de...
Documentation: https://ej2.syncfusion.com/angular/do...
Download free trial: https://www.syncfusion.com/angular-ui...
GitHub source: https://github.com/syncfusion/ej2-ang...
npmjs package: https://www.npmjs.com/package/@syncfu...
--------------------
SUBSCRIBE

Syncfusion on YouTube: http://bit.ly/syncfusionyoutube
Sign up to receive email updates: http://bit.ly/syncfusionemail
---------------------
SOCIAL COMMUNITY

Facebook:   / syncfusion  
Twitter:   / syncfusion  
LinkedIn:   / syncfusion  
Instagram:   / syncfusion  

TRANSCRIPT REFERENCE
----------------------
Most developers of real-time applications that use Angular Scheduler would like to have their own custom dialogs for adding or editing appointments. This is because they may need to match it with their own application-specific additional fields and custom settings.

In this example, I’m going to use the DropdownList and DateTimePicker components to design a custom editor, and therefore I need to install and add the ej2-angular-calendars and ej2-angular-dropdowns packages to my application through the “npm install” command.

After installation, inject them into the app.module.ts file. Now open the app.component.ts file, define the ng-template with the reference "editorTemplate", and add the new editor design with the other components into this template.

While adding the components into such a customized editor template, make sure to provide the class name “e-field” to all the components, as well as the "data-name" attribute to all those components. Assign this “data-name” attribute with the actual mapper field names, which are defined within the Angular Scheduler dataSource for internal source processing.

Another important thing to note while using components within the custom template is that the values of the target element are accessible within the template data.

For example, when you double-click on the cells, the cell information, such as the start-time and end-time details, are accessible within the template data, whereas if you double-click on an event, then the complete event details will be accessible within the template. Only then can those values be directly assigned to the appropriate components using curly braces like {{ data.Subject}}.

#eventscheduler #eventcalendar #angularcalendar #appoinmentscheduler #angularscheduler