Our pure JavaScript Scheduler component


Post by softwareanswers »

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.

https://www.softwareanswers.com/bryntum/bryntum.mp4
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);
    }
}

Post by mats »

We have a ticket open to fix this, we'll look into it soon: https://app.assembla.com/spaces/bryntum/tickets/8898/details

Post Reply