Drag and Drop between ListView and Scheduler

With drag and drop scheduling, you enable users to seamlessly create new Scheduler events by dragging items from external UI components and dropping them into a selected time slot.

To demonstrate the drag and drop scheduling capabilities of the Scheduler component, this article shows how to use the Kendo UI for Angular Drag and Drop utility to move items from ListView to the Scheduler. To create new Scheduler events, you can use the built-in editing directive, reactive forms editing, or direct adding of items to your events collection.

The following example demonstrates how to drag and drop items from the ListView to the Scheduler and create events.

Change Theme

Theme

Loading ...

Configuring the Drag and Drop

To enable users to drag and drop tasks between the ListView and Scheduler components:

1. Wrap both components inside a custom container and apply the kendoDragTargetContainer and kendoDropTargetContainer directives to it.

   html

   <div
       #dragWrapper
       kendoDragTargetContainer
       ...>
       <delivery-list [tasks]="tasks">
       </delivery-list>
   </div>
   <div
       kendoDropTargetContainer
   >
       <kendo-scheduler
           #scheduler
           [kendoSchedulerBinding]="events"
           ...>
       </kendo-scheduler>
   </div>

2. Use dragTargetFilter to specify the draggable element targets and dropTargetFilter to configure the drop targets. Then, handle the Kendo UI for Angular Drag and Drop events, to open the event editing dialog and create a new event.

   html

   <div
       kendoDragTargetContainer
       dragTargetFilter=".k-listview-item"
       (onDrag)="onDrag($event)"
       (onDragStart)="onDragStart($event)"
       ...>
       <delivery-list [tasks]="tasks">
       </delivery-list>
   </div>
   <div
       kendoDropTargetContainer
       dropTargetFilter=".drop-zone"
       (onDrop)="onDrop($event, scheduler)"
       (onDragEnter)="onDragEnter($event)"
       (onDragLeave)="onDragLeave($event)"
   >
       <kendo-scheduler
           #scheduler
           [kendoSchedulerBinding]="events"
           ...>
       </kendo-scheduler>
   </div>

3. Use the addEvent method of the Scheduler to open the event editing dialog and create a new event when a task is dropped. To get the specific time and resource of the slot, use the kendoSchedulerTimeSlotTemplate.

   html

   <div
       kendoDropTargetContainer
       (onDrop)="onDrop($event, scheduler)"
       ...>
       <kendo-scheduler
           #scheduler
           [kendoSchedulerBinding]="events"
           [kendoSchedulerReactiveEditing]="createFormGroup"
           ...>
           <ng-template kendoSchedulerTimeSlotTemplate let-date="date" let-resources="resources">
               <div
                   [attr.allDay]="false"
                   [attr.resourceId]="resources[0].value"
                   [attr.slotDate]="date"
                   >
               </div>
           </ng-template>
       </kendo-scheduler>
   </div>

   ts

   public onDrop(ev: DropTargetEvent, scheduler: SchedulerComponent): void {
       const startDate = new Date(ev.dropTarget.querySelector('.slotDate').getAttribute('slotDate'));
       const endDate = new Date(startDate.getTime() + 30 * 60000);
       const resourceId = ev.dropTarget.querySelector('.slotDate').getAttribute('resourceId');
       const isTaskAllDay: boolean = ev.dropTarget.querySelector('.slotDate').getAttribute('allDay') === 'true';
       ...
       const group = this.formBuilder.group({
           id: this.getNextId(),
           start: [startDate, Validators.required],
           end: [endDate, Validators.required],
           isAllDay: isTaskAllDay,
           ...
           employeeId: +resourceId,
       };
   
       scheduler.addEvent(event);
       ...
   }

4. To inform the dragTargetContainer about changes in its content resulting from the creation of a new event, obtain the reference of the dragTargetContainer directive and call the notify method from the directive to refresh the view.

   ts

   @ViewChild('dragWrapper', { read: DragTargetContainerDirective })
   public dragTargetContainer: DragTargetContainerDirective;
   
   public onSave(): void {
       ...
       this.dragTargetContainer.notify();
   }

5. (Optional) To enable the drag-and-drop of events across multiple views inside the Scheduler, handle the built-in navigate event of the component and inform the DropTargetContainer that its content has changed using the built-in notify() method.

   ts

   public onNavigate(e: NavigateEvent): void {
       if (e.action.type === 'view-change') {
       setTimeout(() => {
           this.dropTargetContainer.notify();
       });
       }
   }

Suggested Links

• API Index of the Kendo UI for Angular Scheduler
• API Index of the Kendo UI for Angular ListView
• Kendo UI for Angular Drag and Drop Overview