Скачать или смотреть Advanced Drag and Resize Options of Angular Scheduler

Learn how to use the drag and resize actions for appointments in the Angular Scheduler’s advanced options. This video will also show you how to drag an external item from another source into the Angular Scheduler.

To get started with Angular Scheduler configuration, watch this video:    • Create an Angular Scheduler Using the Angu...  
To learn how to add appointments:    • How to Add Appointments to the Angular Eve...  

By the end of this video, you will know the advanced options available with the drag and resize actions of Angular Scheduler. More importantly, you will know how to drag and drop an item from the TreeView component into Angular Scheduler cells.

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
----------------------
The most interactive features of Angular Scheduler are the dragging and dropping of appointments within or outside the scheduler and the resizing of appointments. To work with these features, you simply need to import two additional modules to your application, which are “DragAndDropService” and “ResizeService”.

Only when these modules are injected can you proceed to perform drag and resize actions on Angular Scheduler appointments. You can then control the drag and resize actions of the appointments for all aspects through the scheduler’s available properties and options, referenced here: https://ej2.syncfusion.com/angular/do...

With these available options, you can control the scrolling and navigation actions that take place while dragging or resizing an appointment. You can also decide on specific target areas in which you don’t want to drop appointments. You can even set the time interval for both the drag and resize actions.

To drag an item from an external source into an Angular Scheduler, you can make use of the TreeView component as an external source. You can drag an item from the TreeView and drop it into the Angular Scheduler.

To make use of the TreeView component, you need to add and install the ej2-angular-navigations package by using “npm install @syncfusion/ej2-angular-navigations”. Once done, you need to import and inject the TreeViewModule from this package within the app.module.ts file.

Define the TreeView component within the app.component.ts file. Now, to save the dropped item in the scheduler, write the required code for adding that item to it using the “addEvent” method, within the “nodeDragStop” event of TreeView.

If you want to open the editor window instead of directly saving that external data, then you can open the it while dropping the tree view item into the Scheduler, by calling the “openEditor” method within the “nodeDragStop” event of TreeView.

External drag and drop reference:
Example: https://ej2.syncfusion.com/angular/do...
Documentation: https://ej2.syncfusion.com/angular/do...

#eventscheduler #eventcalendar #angularcalendar #appoinmentscheduler #angularscheduler