Drag Drop Bug when event is too short

Our pure JavaScript Scheduler component
Post Reply
User avatar
softwareanswers
Posts: 5
Joined: Fri Sep 06, 2019 8:19 pm

Drag Drop Bug when event is too short

Post by softwareanswers » Wed Sep 11, 2019 6:56 pm

I've attached a screen recording. Notice that if the event spans a few days, you can adjust the date range horizontally without any issues. But, if the event only spans a day or two, it completely moves the event when you attempt to adjust its start or end date. The screen recording shows that the expand icon is showing versus the drag/drop indicator. I've included the basics of my code. I was running Chrome Version 76.0.3809.132 (Official Build) (64-bit).

Your forum won't let me upload the mp4 so here is a link to it.

http://www.softwareanswers.com/bryntum/bryntum.mp4

Code: Select all

function ScheduleBoardController()
{
    this.Scheduler = null;
}


ScheduleBoardController.prototype.init = function ()
{
    var self = this;

    bryntum.scheduler.PresetManager.registerPreset('oscar',
    {
        displayDateFormat: 'DD-MMM-YY h:mm a',
        shiftIncrement: 1,
        shiftUnit: 'day',
        tickWidth: 20,
        timeResolution: {
            unit: 'minute',
            increment: 5
        },
        headerConfig: {
            bottom: {
                unit: 'day',
                renderer(start,end,headerConfig,index)
                {
                    var weekday = bryntum.scheduler.DateHelper.format(start, 'dd');

                    if (weekday == 'Su')
                    {
                        return '<font style="color:red">' + weekday.substring(0, 1) + '</font>';
                    }

                    return weekday.substring(0, 1);
                }
            },
            middle: {
                unit: 'day',
                renderer(start, end, headerConfig, index)
                {
                    var day = bryntum.scheduler.DateHelper.format(start, 'D');

                    switch (day)
                    {
                        case '10':
                        case '20':
                        case '30':
                            return '<span style="writing-mode: vertical-rl;text-orientation: upright;">' + day + '</span>';
                        default:
                            return '<span style="padding-top:17px">' + day + '</span>';
                    }
 
                }
            },
            top: {
                unit: 'month',
                renderer(start, end, headerConfig, index)
                {
                    return '<span style="padding-top:3px">' + bryntum.scheduler.DateHelper.format(start, 'MMMM YYYY') + '</span>';
                }
            }
            
        },
        columnLinesFor: 'bottom' 
    });

    self.Scheduler = new bryntum.scheduler.Scheduler(
        {
            appendTo: self.ParentContainerID,
            minHeight: '10em',
            rowHeight: 40,
            startDate: new Date(2018, 11, 1),
            endDate: new Date(2019, 1, 31),
            viewPreset: 'oscar',
            resourceMargin: 2,
            features:
            {
                stripe: true,
                eventResize:
                {
                    validatorFn: function (e)
                    {
                        console.log('validating resize'); return true;
                    }
                },
                eventEdit:
                {
                    eventdblclick: function (e)
                    {
                        alert('test');
                    }
                }
            },
            columns: [{
                type: 'rownumber',
                hidden:true
            }, {
                text: 'Id',
                field: 'id',
                width: 50,
                hidden: true
            }, {
                text: 'Unit',
                field: 'UnitCode',
                flex: 1
            }, {
                text: 'Type',
                field: 'UnitType',
                width: 30
                }
            ],
            listeners:
            {
                beforeLoadApply: function beforeLoadApply(_ref) 
                {
                    var response = _ref.response;

                    response.events.rows.forEach(function (event) 
                    {
                        return event.agenda.forEach(function (nestedEvent) 
                        {
                            nestedEvent.startDate = new Date(nestedEvent.startDate);
                            nestedEvent.endDate = new Date(nestedEvent.endDate);

                            nestedEvent.startOffset = bryntum.scheduler.DateHelper.diff(new Date(event.startDate), nestedEvent.startDate);
                            nestedEvent.endOffset = bryntum.scheduler.DateHelper.diff(nestedEvent.startDate, nestedEvent.endDate);
                        });
                    });
                }
            },
            eventBodyTemplate: function eventBodyTemplate(values) 
            {
                return values.map(function (value)
                {
                    return "\n        <div class=\"nested\" style=\"left: ".concat(value.left, "px;width: ").concat(value.width, "px\">\n            ").concat(value.name, "\n        </div>\n    ");
                }).join('');
            },
            eventRenderer: function eventRenderer(_ref2)
            {
                var _this = this;

                var eventRecord = _ref2.eventRecord;
                var tplData = _ref2.tplData;

                // getCoordinateFromDate gives us a px value in time axis, subtract events left from it to be within the event
                var dateToPx = function dateToPx(date)
                {
                    return _this.getCoordinateFromDate(date) - tplData.left;
                }; // Calculate coordinates for all nested events and put in an array passed on to eventBodyTemplate


                return (eventRecord.agenda || [eventRecord]).map(function (nestedEvent)
                {
                    return {
                        left: dateToPx(bryntum.scheduler.DateHelper.add(eventRecord.startDate, nestedEvent.startOffset)),
                        width: dateToPx(bryntum.scheduler.DateHelper.add(eventRecord.startDate, nestedEvent.endOffset)),
                        name: nestedEvent.name
                    };
                });
            }
        });

   

    self.loadData();
     
}

ScheduleBoardController.prototype.loadData = function ()
{
    var self = this;

    try
    {
        self.Scheduler.resources = [
            { id: 1, UnitCode: 'UAB-001', UnitType: '1/1' },
            { id: 2, UnitCode: 'UAB-002', UnitType: '2/1' },
            { id: 3, UnitCode: 'UAB-003', UnitType: '1/2' },
            { id: 4, UnitCode: 'UAB-004', UnitType: '2/3' },
            { id: 5, UnitCode: 'UAB-005', UnitType: '3/3' },
            { id: 6, UnitCode: 'UAB-006', UnitType: '3/3' },
            { id: 7, UnitCode: 'UAB-007', UnitType: '3/2' },
            { id: 8, UnitCode: 'UAB-008', UnitType: '3/1' },
            { id: 9, UnitCode: 'UAB-009', UnitType: '2/2' },
            { id: 10, UnitCode: 'UAB-010', UnitType: '2/2' },
            { id: 11, UnitCode: 'UAB-011', UnitType: '2/2' },
            { id: 12, UnitCode: 'UAB-012', UnitType: '3/3' },
            { id: 13, UnitCode: 'UAB-013', UnitType: '3/3' },
            { id: 14, UnitCode: 'UAB-014', UnitType: '3/3' },
            { id: 15, UnitCode: 'UAB-015', UnitType: '3/3' },
            { id: 16, UnitCode: 'UAB-016', UnitType: '3/3' },
            { id: 17, UnitCode: 'UAB-017', UnitType: '3/3' },
            { id: 18, UnitCode: 'UAB-018', UnitType: '3/3' },
            { id: 19, UnitCode: 'UAB-019', UnitType: '3/3' },
            { id: 20, UnitCode: 'UAB-020', UnitType: '3/3' },
            { id: 21, UnitCode: 'UAB-021', UnitType: '3/3' },
            { id: 22, UnitCode: 'UAB-022', UnitType: '3/3' },
            { id: 23, UnitCode: 'UAB-023', UnitType: '4/1' },
            { id: 24, UnitCode: 'UAB-024', UnitType: '1/1' },
            { id: 25, UnitCode: 'UAB-025', UnitType: '1/1' }
        ];

        self.Scheduler.events = [
            {
                resourceId: 1, startDate: new Date(2018, 11, 01), endDate: new Date(2018, 11, 20), stuff: 'stuff 1', name: 'Make coffee', eventColor: 'cyan', eventStyle: 'colored',
                agenda: []
            },
            {
                resourceId: 2, startDate: new Date(2018, 11, 04), endDate: new Date(2018, 11, 06), stuff: 'stuff 2', name: 'Meeting', eventColor: 'green', eventStyle: 'colored',
                agenda: []
            },
            {
                resourceId: 6, startDate: new Date(2018, 11, 04), endDate: new Date(2018, 11, 06), stuff: 'stuff 6', name: 'Meeting', eventColor: 'purple', eventStyle: 'colored',
                agenda: []
            },
            {
                resourceId: 10, startDate: new Date(2018, 11, 1), endDate: new Date(2018, 11, 12), stuff: 'stuff 3', name: 'Robbe 10', eventColor: 'red', eventStyle: 'colored',
                agenda: [
                    { name: "Agenda", startDate: "2018-12-01T10:00:00", endDate: "2018-12-03T11:00:00" },
                    { name: "Conclusion", startDate: "2018-12-07T15:00:00", endDate: "2018-12-08T16:00:00" }
                ]
            },
            {
                resourceId: 25, startDate: new Date(2018, 11, 1), endDate: new Date(2018, 11, 12), stuff: 'stuff 3', name: 'Robbe', eventColor: 'red', eventStyle: 'colored',
                agenda: [
                    { name: "Agenda", startDate: "2018-12-01T10:00:00", endDate: "2018-12-03T11:00:00" },
                    { name: "Conclusion", startDate: "2018-12-07T15:00:00", endDate: "2018-12-08T16:00:00" }
                ]
            }
        ];

        self.Scheduler.resourceStore.load();
        self.Scheduler.eventStore.load();

    }
    catch (e)
    {
        console.log('loadData: ' + e);
    }
}

User avatar
mats
Core Developer
Core Developer
Posts: 14554
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Drag Drop Bug when event is too short

Post by mats » Wed Sep 11, 2019 9:39 pm

We have a ticket open to fix this, we'll look into it soon: https://app.assembla.com/spaces/bryntum/tickets/8898/details
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply