DEV Community

Cover image for How to Drag and Drop Events from an External Source into the Angular Scheduler
Arun for Syncfusion, Inc.

Posted on

How to Drag and Drop Events from an External Source into the Angular Scheduler

Learn how to drag and drop events from an external source into the Angular Scheduler component. This video explains how to drag an item from the TreeView component to the Scheduler and update it as an event using the nodeDragStop event of the TreeView.

The Angular Scheduler component is an event calendar that facilitates almost all the basic Outlook and Google Calendar features, allowing the user to plan and manage appointments and time efficiently. It receives event data from a variety of data sources, such as an array of JSON objects, OData web services, RESTful or WCF services, and DataManager with built-in load-on-demand support to reduce the data transfer and load time. Also, it has multiple-resource support that allots a unique individual space for more than one resource on the same calendar.

The Angular TreeView is a graphical user interface component that represents hierarchical data in a tree structure. It provides great performance with its advanced features like load-on-demand, check boxes, multiple selection, tree navigation, drag and drop, tree node editing, and template support. This component allows you to drag and drop any node by setting allowDragAndDrop to true. Nodes can be dragged and dropped at all levels of the same TreeView. The dragged nodes can be dropped at any level by indicator lines with line, plus/minus, and restrict icons. It represents the exact position where the node is to be dropped as a sibling or child.

Tutorial video:

Download an example from GitHub:

Top comments (0)