Am working with one of your react example in the scheduler Drag from Grid.. Just wanted to check if it is covered under our license.?
Support Forum
Grid is a separate product, needing its own license. It's mentioned in the demo (bottom right corner). https://bryntum.com/examples/scheduler/react/javascript/drag-from-grid/build/index.html
Hello,
You don't need to create a grid to render your target elements. You can subclass https://www.bryntum.com/docs/scheduler/#Core/helper/DragHelper class available in Scheduler to implement what you need. Let's say you render a div element and you drag this element to the timeline. Based on drop position you create a new event and add it to the scheduler store. Here is how this could be implemented, for example in Basic demo:
Scheduler/examples/basic/app.js
/* eslint-disable no-unused-vars */
import '../_shared/shared.js'; // not required, our example styling etc.
import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
import DragHelper from '../../lib/Core/helper/DragHelper.js';
import DomHelper from '../../lib/Core/helper/DomHelper.js';
import Rectangle from '../../lib/Core/helper/util/Rectangle.js';
//region Data
const resources = [...],
events = [...];
//endregion
class MyDrag extends DragHelper {
static get defaultConfig() {
return {
// Don't drag the actual element, clone it
cloneTarget : true,
mode : 'translateXY',
// Only allow drops on DOM elements with 'b-timeline-subgrid' CSS class specified
dropTargetSelector : '.b-timeline-subgrid',
// Only allow dragging elements with the 'draggable' CSS class
targetSelector : '.draggable'
};
}
construct(config) {
super.construct(config);
this.on({
dragstart : this.onDragStart,
drop : this.onDrop
});
}
onDragStart({ event, context }) {
// Here you identify what you are dragging (an image of a user, grid row in an order table etc) and map it to something in your
// data model. You can store your data on the context object which is available to you in all drag-related events
context.eventName = context.grabbed.innerText;
}
onDrop({ source, context, event }) {
if (context.valid) {
const
rect = Rectangle.client(context.element, DomHelper.up(context.target, source.config.dropTargetSelector)),
startDate = scheduler.getDateFromCoordinate(rect.x, 'round', true, true),
endDate = scheduler.getDateFromCoordinate(rect.right, 'round', true, true),
resource = scheduler.resolveResourceRecord(event);
scheduler.eventStore.add({
name : context.eventName,
resourceId : resource.id,
startDate,
endDate
});
// tell the drag helper the operation is finished
context.finalize();
}
}
};
const scheduler = new Scheduler({
adopt : 'container',
minHeight : '20em',
resources : resources,
events : events,
startDate : new Date(2017, 0, 1, 6),
endDate : new Date(2017, 0, 1, 20),
viewPreset : 'hourAndDay',
rowHeight : 50,
barMargin : 5,
multiEventSelect : true,
columns : [
{ text : 'Name', field : 'name', width : 130 }
]
});
new MyDrag();
Scheduler/examples/basic/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Basic demo</title>
<script src="../_shared/browser/helper.js"></script>
<link rel="stylesheet" href="../../build/scheduler.stockholm.css" id="bryntum-theme">
<link rel="stylesheet" href="../_shared/shared.css">
<style>
.draggable {
background : orange;
cursor : grab;
width : 300px;
height : 50px;
display : flex;
align-items : center;
justify-content : center;
}
</style>
</head>
<body>
<div id="container">
<div class="draggable">My task</div>
</div>
<!-- Using Ecma Modules -->
<script type="module" src="app.js"></script>
</body>
</html>
- Запись активности на экране 2020-06-01 в 19.32.18.gif (1.48 MiB) Viewed 2279 times
Hope this will help you to achieve what you need. We will update our docs of DragHelper to make it more clear.
Best,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer