Your search did not match any results.
Scheduler

Custom Drag-and-Drop

Appointment drag-and-drop is enabled out-of-the-box, provided that appointments are moved within the Scheduler. This demo shows how to allow users to move appointments from the Scheduler to a list and back.

This feature is configured in the appointmentDragging object. Add an appointment in the onAdd function; delete an appointment and create a corresponding list item in the onRemove function.

Each list item should be attached an instance of the Draggable widget. Its data option can contain any useful data. In this demo, it contains an appointment's subject that is passed to the Scheduler in the onDragStart function and then used to add new appointments.

Another Draggable instance is attached to the list itself. All these instances and the Scheduler are collected in a group so that users can drag and drop appointments between them.

Copy to CodePen
Apply
Reset
$(function () { var draggingGroupName = "appointmentsGroup"; var createItemElement = function(data) { $("<div>") .text(data.text) .addClass("item dx-card dx-theme-background-color dx-theme-text-color") .appendTo("#list") .dxDraggable({ group: draggingGroupName, data: data, clone: true, onDragEnd: function(e) { if (e.toData) { e.cancel = true; } }, onDragStart: function(e) { e.itemData = e.fromData; } }); } $("#scroll").dxScrollView({}); $("#list").dxDraggable({ data: "dropArea", group: draggingGroupName, onDragStart: function(e) { e.cancel = true; } }); tasks.forEach(function(task) { createItemElement(task); }); $("#scheduler").dxScheduler({ dataSource: appointments, views: [{ type: "day", intervalCount: 3 }], currentDate: new Date(2017, 4, 22), startDayHour: 9, height: 600, editing: true, appointmentDragging: { group: draggingGroupName, onRemove: function(e) { e.component.deleteAppointment(e.itemData); createItemElement(e.itemData); }, onAdd: function(e) { e.component.addAppointment(e.itemData); e.itemElement.remove(); } } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn3.devexpress.com/jslib/19.2.3/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="scroll"> <div id="list"></div> </div> <div id="scheduler"></div> </div> </body> </html>
#scroll, #list { position: absolute; left: 0; top: 0; bottom: 0; width: 240px; } .item { box-sizing: border-box; padding: 10px 20px; margin-bottom: 10px; } #scheduler { margin-left: 270px; } .dx-draggable-source { opacity: 0.5; } .dx-draggable-dragging { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); }
var tasks = [ { text: "New Brochures" }, { text: "Brochure Design Review" }, { text: "Upgrade Personal Computers" }, { text: "Install New Router in Dev Room" }, { text: "Upgrade Server Hardware" }, { text: "Install New Database" }, { text: "Website Re-Design Plan" }, { text: "Create Icons for Website" }, { text: "Submit New Website Design" }, { text: "Launch New Website" } ]; var appointments = [{ text: "Book Flights to San Fran for Sales Trip", startDate: new Date(2017, 4, 22, 12, 0), endDate: new Date(2017, 4, 22, 13, 0), allDay: true }, { text: "Approve Personal Computer Upgrade Plan", startDate: new Date(2017, 4, 23, 10, 0), endDate: new Date(2017, 4, 23, 11, 0) }, { text: "Final Budget Review", startDate: new Date(2017, 4, 23, 12, 0), endDate: new Date(2017, 4, 23, 13, 35) }, { text: "Approve New Online Marketing Strategy", startDate: new Date(2017, 4, 24, 12, 0), endDate: new Date(2017, 4, 24, 14, 0) }, { text: "Customer Workshop", startDate: new Date(2017, 4, 25, 11, 0), endDate: new Date(2017, 4, 25, 12, 0), allDay: true }, { text: "Prepare 2015 Marketing Plan", startDate: new Date(2017, 4, 25, 11, 0), endDate: new Date(2017, 4, 25, 13, 30) } ];