Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollToDate not working in combination with infiniteScroll and workingTime #5328

Closed
marciogurka opened this issue Sep 27, 2022 · 1 comment
Labels
bug Something isn't working forum Issues from forum

Comments

@marciogurka
Copy link

The user provided an example of a strange behavior


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
        }]

});

if you remove the workingTime : { fromHour : 15, toHour : 22 }, the scrollToDate function runs smoothly, but when added, the scroll seems to not work properly, as you can see in one of the videos

Bug.behavior.Bryntum.Scheduler.-.Basic.demo.-.27.September.2022.mp4
Working.correctly.Bryntum.Scheduler.-.Basic.demo.-.27.September.2022.mp4
@marciogurka marciogurka added bug Something isn't working forum Issues from forum labels Sep 27, 2022
@marciogurka
Copy link
Author

Not reproducible on the latest version (5.6.3)

02.01.2024_14.17.19_REC.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working forum Issues from forum
Projects
None yet
Development

No branches or pull requests

1 participant