Our pure JavaScript Scheduler component


Post by glennvl91 »

Hi

When I use infiniteScroll and set workingTime values to only show necessary hours then it seems that scrollToDate is not working correctly. It scrolls to a date but not the date selected in the input. It scrolls to a date close to it but not enough. Same with scrollToNow.

I guess it has something to do with the limitation of hours because if I leave that out, it works fine.

Tested it out in de basic demo of scheduler and I can reproduce this bug so I think there is something wrong there. Can u guys take a look?

Code:

import { Scheduler, DateHelper } from '../../build/scheduler.module.js?461863';
import shared from '../_shared/shared.module.js?461863';

//region Data

const
    resources = [
        { id : 'r1', name : 'Mike' },
        { id : 'r2', name : 'Linda' },
        { id : 'r3', name : 'Don' },
        { id : 'r4', name : 'Karen' },
        { id : 'r5', name : 'Doug' },
        { id : 'r6', name : 'Peter' },
        { id : 'r7', name : 'Sam' },
        { id : 'r8', name : 'Melissa' },
        { id : 'r9', name : 'John' },
        { id : 'r10', name : 'Ellen' }
    ],
    events = [
        {
            id         : 1,
            resourceId : 'r1',
            startDate  : new Date(2017, 0, 1, 10),
            endDate    : new Date(2017, 0, 1, 12),
            name       : 'Click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 2,
            resourceId : 'r2',
            startDate  : new Date(2017, 0, 1, 12),
            endDate    : new Date(2017, 0, 1, 13, 30),
            name       : 'Drag me',
            iconCls    : 'b-fa b-fa-arrows-alt'
        },
        {
            id           : 3,
            resourceId   : 'r3',
            startDate    : new Date(2017, 0, 1, 14),
            duration     : 2,
            durationUnit : 'h',
            name         : 'Double click me',
            eventColor   : 'purple',
            iconCls      : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 4,
            resourceId : 'r4',
            startDate  : new Date(2017, 0, 1, 8),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Right click me',
            iconCls    : 'b-fa b-fa-mouse-pointer'
        },
        {
            id         : 5,
            resourceId : 'r5',
            startDate  : new Date(2017, 0, 1, 15),
            endDate    : new Date(2017, 0, 1, 17),
            name       : 'Resize me',
            iconCls    : 'b-fa b-fa-arrows-alt-h'
        },
        {
            id         : 6,
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 16),
            endDate    : new Date(2017, 0, 1, 19),
            name       : 'Important meeting (read-only)',
            iconCls    : 'b-fa b-fa-exclamation-triangle',
            eventColor : 'red',
            readOnly   : true
        },
        {
            id         : 7,
            resourceId : 'r6',
            startDate  : new Date(2017, 0, 1, 6),
            endDate    : new Date(2017, 0, 1, 8),
            name       : 'Sports event',
            iconCls    : 'b-fa b-fa-basketball-ball'
        },
        {
            id         : 8,
            resourceId : 'r7',
            startDate  : new Date(2017, 0, 1, 9),
            endDate    : new Date(2017, 0, 1, 11, 30),
            name       : 'Dad\'s birthday!',
            iconCls    : 'b-fa b-fa-birthday-cake',
            // Custom styling from data
            style      : 'background-color : teal; font-size: 18px',
            // Prevent default styling
            eventStyle : 'none'
        }
    ];

//endregion

const scheduler = new Scheduler({
    appendTo         : 'container',
    resources        : resources,
    events           : events,
    workingTime      : { fromHour: 15, toHour: 22 },
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,
    columns          : [
        {text : 'Name', field : 'name', width : 130 }
    ],
    infiniteScroll   : true,
    tbar             : [
{
    label      : 'Ga naar',
    inputWidth : '7em',
    width      : 'auto',
    type       : 'datefield',
    value      : DateHelper.clearTime(new Date()),
    step       : '1d',
    listeners  : {
        change({ userAction, value }) {
            if (userAction) {
                scheduler.scrollToDate(DateHelper.set(value, 'hour', 21), { block : 'end', animate : 500 });
            }
        }
    },
    highlightExternalChange : false
}]

});

Post by marcio »

Hey glennvl91,

Thanks for the report, I created a ticket to investigate/fix it https://github.com/bryntum/support/issues/5328

Best regards,
Márcio


Post Reply