How to prevent the changed between dates when we implemented Rowfilter and Scrolling.

Asked by Arturo Villalpando
4 years ago.

Hi everybody,

I have a trouble with the plugin, and I don't know how to fix it. I implemented Infinite Scrolliing and RowFilter, the problem ocurrs when I filtered the Scheduler and the dates moved. I had a problem similar with Infinite Scrolling and Zoom, in that case I solved with set the date in onScroll function, but this time doesn't work. can you help me with this please.

I had another problem when I reload the webpage, the events load two times or three, like the scroll moved, and i dont know why.

I include the code attachment, thanks in advanced.

scrolling.js

Answer posted by Dan Letecky [DayPilot]
4 years ago.

When infinite scrolling is enabled, it is necessary to be careful when changing the Scheduler timeline parameters (scale, cellWidth, startDate and especially days).

The infinite scrolling feature shifts the timeline whenever the the scrollbar is near the start or end of the current timeline. If the timeline is too short, it may switch back and forth indefinitely or scroll away to a different date. You should keep the timeline length greater than 3 times the viewport width.

Resetting the startDate in onScroll mentioned here is not a good idea - it will break things:
https://forums.daypilot.org/question/4986/problems-between-infinite-scrolling-and-switcher-over-sched

Generally, you shouldn't modify the Scheduler properties in onScroll, see also:
https://api.daypilot.org/daypilot-scheduler-onscroll/

The same applies when setting the initial Scheduler parameters. If you use the default scrollbar position during initialization, it will immediately shift the timeline after calling init(). You should scroll away from the startDate before calling init() - use scrollTo() method:
https://api.daypilot.org/daypilot-scheduler-scrollto/

When using zoom, you may need to use different the infinite scrolling properties for different zoom levels:
https://doc.daypilot.org/scheduler/infinite-scrolling/

Comment posted by Arturo Villalpando
4 years ago.

The problem with the scroll still go on, even i tried to implement a basic configuration, but doesn't work. Also i tried to take the example code from the infinite demo and doesn't work too.

Always that i tried this change, I set startDate = "2018-01-01"; when i run the website the month moves one month backward (Dec 2017), even if I add at the end dp.scrollTo("2018-01-01"); the month moves another month backward (Nov 2017).

When I ran the demo from the scheduler folder works well and i don know why, but when i took the script code and put that in a example like below doesn't works. For this test I alway used a simple website, with the javascript code that is below or I took the demo code, both works similar:

<!DOCTYPE html>
<html>
<head>
    <title>DayPilot Pro for JavaScript</title>
	<!-- head -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- helper libraries -->
	<script src="jquery-1.12.2.min.js" type="text/javascript"></script>
	<!-- daypilot libraries -->
	<script src="daypilot-all.min.js" type="text/javascript"></script> 
</head>
<body>
	<div>
		<div id="dp"></div>
	</div>
	<script type="text/javascript">
		var dp = new DayPilot.Scheduler("dp");
		dp.startDate = "2018-01-01";
		dp.days = 365;
		dp.scale = "Day";
		dp.timeHeaders = [
			{ groupBy: "Month", format: "MMM yyyy" },
			{ groupBy: "Cell", format: "ddd d" }
		];
		dp.scrollDelayEvents = 0;
		dp.infiniteScrollingEnabled = true;
		dp.onScroll = function(args) {
			//
		};
		dp.dynamicLoading = true;
		dp.init();
		dp.scrollTo("2018-01-01");
	</script>
</body>
</html>

Comment posted by Dan Letecky [DayPilot]
4 years ago.

It's necessary to call scrollTo() before init() and use it to scroll to a date that is sufficiently distant from the startDate. This will prevent immediate shifting of the timeline.

Like this:

<!DOCTYPE html>
<html>
<head>
    <title>DayPilot Pro for JavaScript</title>
    <!-- head -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- daypilot libraries -->
    <script src="daypilot-all.min.js" type="text/javascript"></script>
</head>
<body>
<div>
    <div id="dp"></div>
</div>
<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    dp.startDate = new DayPilot.Date("2018-01-01");
    dp.days = 365;
    dp.scale = "Day";
    dp.timeHeaders = [
        { groupBy: "Month", format: "MMM yyyy" },
        { groupBy: "Cell", format: "ddd d" }
    ];
    dp.scrollDelayEvents = 0;
    dp.infiniteScrollingEnabled = true;
    dp.onScroll = function(args) {
//
    };
    dp.dynamicLoading = true;
    dp.scrollTo("2018-03-01");
    dp.init();
</script>
</body>
</html>

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

How to prevent the changed between dates when we implemented Rowfilter and Scrolling.

Products

Learn

Get Support

DayPilot Pro