We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to drag and drop appointment items into the Schedule control from external sources?

Appointments can be dragged and dropped into the Schedule control from external sources. For example, it is possible to drag the appointment from the ListBox and drop it into the Schedule control.

The following steps help you perform the external drag and drop with JavaScript Schedule control.

Step 1: Create a Schedule control with multiple resource samples by referring to the following links.

Sample Link:

http://js.syncfusion.com/demos/web/#!/azure/schedule/horizontalview/resourcegrouping

Document Link: [Under the title Horizontal Resource Grouping]

http://docs.syncfusion.com/js/schedule/horizontal-view

Step 2: Create a ListBox control with the appointment details as its datasource, like AppointmentList, and also initialize the itemDropped client-side event of it. Enable the allowDragAndDrop option of ListBox. The following code example renders the JavaScript ListBox with the appointment items, enabling the allowDragAndDrop option and also initializing its client-side event.

HTML

JavaScript

Step 3: To display the appointments with categorize, add the category collection to the Schedule control. Refer the following code examples to add the categorizeSettings value in the Schedule control.

JavaScript

Also, refer to the following links to know about how to add categorize settings to the appointments in the Schedule control.

Sample link:

http://js.syncfusion.com/demos/web/#!/azure/schedule/categorize

Document link:

http://docs.syncfusion.com/js/schedule/categorize

Step 4: To save and reflect the dropping of the appointment details in the Schedule control, you can save that appointment with the dragged item or object details. The following code example is to save the changes in the Schedule control. You can write the following code within the itemDropped method, that is triggered while dragging an appointment item from the ListBox control.

JavaScript

Note: The above code example is applicable for both the Horizontal & Vertical Orientation.

Step 4: Run the sample. The Schedule control and ListBox are displayed as follows.

Figure 1: Schedule control and ListBox display before drag and drop

Step 5: Now, you can drag the appointment item from the ListBox and drop the same to the Schedule control.

Figure 2: Schedule control with dropped appointments and the same item removed from the ListBox

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/142835/ze/ExternalDragAndDrop-397469137

Article ID: Published Date: Last Revised Date: Platform: Control:
5392 08/27/2015 02/18/2016 JavaScript ejSchedule
Tags:
Did you find this information helpful?
Comments
Jonas de Abreu Resenes Feb 07, 2017
hello, do you know if it's possible to drag and drop row from ejgrid to ejschedule?
Reply
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon