Our pure JavaScript Scheduler component

Post by Mukilan A »

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.?

Post by mats »

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

Post by Mukilan A »

thanks yes I noticed that. Though I need to know if there is any other workaround you might suggest to use drag a task to the scheduler.. Because we don't want to use the complete features of the Grid.. we are interested only on the feature shown in the demo.

Post by pmiklashevich »


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:


/* 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    = [...];


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) {

        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) {
            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);

            name       : context.eventName,
            resourceId : resource.id,

        // tell the drag helper the operation is finished

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();


<!DOCTYPE html>
<html lang="en">

    <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">
        .draggable {
            background      : orange;
            cursor          : grab;
            width           : 300px;
            height          : 50px;
            display         : flex;
            align-items     : center;
            justify-content : center;


<div id="container">
    <div class="draggable">My task</div>
<!-- Using Ecma Modules -->
<script type="module" src="app.js"></script>

Запись активности на экране 2020-06-01 в 19.32.18.gif
Запись активности на экране 2020-06-01 в 19.32.18.gif (1.48 MiB) Viewed 1987 times

Hope this will help you to achieve what you need. We will update our docs of DragHelper to make it more clear.


Pavlo Miklashevych
Sr. Frontend Developer

Post by Mukilan A »

Brilliant it looks good on first look, will check and get back.. Thanks again for your help

Post Reply