Inquiry on Implementing Infinite Scrolling with Defined Range in DHTMLX Timeline

Scheduler
#1

Dear DHTMLX Support Team,

I hope this message finds you well.

I am currently working on a project that utilizes the DHTMLX Timeline component, and I have a specific requirement for implementing infinite scrolling while also setting a defined range.

I have successfully set the range for the timeline, but I am now looking to enhance the user experience by adding infinite scrolling functionality. Could you please provide guidance or any example code on how to achieve infinite scrolling within the defined range of the timeline?

Any assistance or references to relevant documentation would be greatly appreciated.

Thank you for your support and assistance.

Best regards,

#2

Hello @Souvik_Khan,

There is no built-in config for infinite scroll, but technically it can be implementing with the onScroll event.

The idea is to calculate the dates close to the end of the screen by the position of the scrollbar, with the dateFromPos and getState methods, and then updating the timeline x_size property.

The code may look like follows:

let timeline = scheduler.getView();
let toggle = false;
let state = scheduler.getState();

timeline.attachEvent("onScroll", function(left, top){
    let date = timeline.dateFromPos(left);
    let oneWeekBeforeEnd = scheduler.date.add(new Date(scheduler.getState().max_date), -9, "day");

    if(+date >= +oneWeekBeforeEnd && toggle == false){ 
        toggle = true;
        timeline.x_size += 30; 
        scheduler.updateView();  
        state = scheduler.getState(); 
        setTimeout(() => {
            toggle = false;
        }, 1000)
    } 

});

Here is a demo:
https://snippet.dhtmlx.com/ur89lgc2

The only issue, as the scroll operation will stop on each re-render.

Kind regards,