search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Calendar scroll speed

Asked by Cezar
1 year ago.

Is there any method to change scroll speed on DayPilot Calendar? For now it's scrolling very slow and I'm forced to use left mouse button and grab scroll to scroll quickly to some hour...

Comment posted by Dan Letecky [DayPilot]
1 year ago.

It's using the default scrolling mechanism (a div with overflow: scroll). What system (OS, browser) do you use and how do you scroll (mouse wheel, touchpad gesture)?

Comment posted by Cezar
1 year ago.

Windows 10, Google Chrome. Every tab is scrolling like always, but only calendar inside scrolls 15 minutes after one full scroll.

Comment posted by Cezar
1 year ago.

Mouse wheel.

Comment posted by Dan Letecky [DayPilot]
1 year ago.

Do you see the problem here as well?
https://javascript.daypilot.org/demo/calendar/index.html

It seems to work fine for me (Windows 10, Chrome, mouse wheel).

Comment posted by Cezar
1 year ago.

No, this calendar works fine.

Look at my recorded video: https://streamable.com/om7bg

Comment posted by Dan Letecky [DayPilot]
1 year ago.

Do you synchronize those two calendars using a custom onscroll handler? That might be causing the problem. Try adding a delay using setTimeout() when changing the scroll position of the other calendar. Otherwise it might create a kind of circular dependency and block the UI.

Comment posted by Cezar
1 year ago.

<script type="text/javascript">
dp_day.nav.bottomRight.addEventListener("scroll", function() {
dp_week.nav.bottomRight.scrollTop = dp_day.nav.bottomRight.scrollTop;
dn_day.nav.bottomRight.scrollTop = dp_day.nav.bottomRight.scrollTop;
dn_week.nav.bottomRight.scrollTop = dp_day.nav.bottomRight.scrollTop;
});

dp_week.nav.bottomRight.addEventListener("scroll", function () {
dp_day.nav.bottomRight.scrollTop = dp_week.nav.bottomRight.scrollTop;
dn_day.nav.bottomRight.scrollTop = dp_week.nav.bottomRight.scrollTop;
dn_week.nav.bottomRight.scrollTop = dp_week.nav.bottomRight.scrollTop;
});

dn_day.nav.bottomRight.addEventListener("scroll", function () {
dp_week.nav.bottomRight.scrollTop = dn_day.nav.bottomRight.scrollTop;
dp_day.nav.bottomRight.scrollTop = dn_day.nav.bottomRight.scrollTop;
dn_week.nav.bottomRight.scrollTop = dn_day.nav.bottomRight.scrollTop;
});

dn_week.nav.bottomRight.addEventListener("scroll", function () {
dp_week.nav.bottomRight.scrollTop = dn_week.nav.bottomRight.scrollTop;
dp_day.nav.bottomRight.scrollTop = dn_week.nav.bottomRight.scrollTop;
dp_week.nav.bottomRight.scrollTop = dn_week.nav.bottomRight.scrollTop;
});
</script>@*ScrollBars*@

This is my code, so which calendars exactly do I have to timeout? Or can you simlply write those lines for me please?

Answer posted by Dan Letecky [DayPilot]
1 year ago.

Basically everything inside function() { .... }:

<script type="text/javascript"> 
dp_day.nav.bottomRight.addEventListener("scroll", function() { 
  setTimeout(function() {
    dp_week.nav.bottomRight.scrollTop = dp_day.nav.bottomRight.scrollTop; 
    dn_day.nav.bottomRight.scrollTop = dp_day.nav.bottomRight.scrollTop; 
    dn_week.nav.bottomRight.scrollTop = dp_day.nav.bottomRight.scrollTop; 
  }, 0);
});

Do the same for all remaining event handlers as well.

Comment posted by Cezar
1 year ago.

It works now even worse than before.

Comment posted by Dan Letecky [DayPilot]
1 year ago.

Have you tried increasing the delay (from 0 to a higher value)?

You can also try to override onwheel event and set the position manually for all calendars.

Comment posted by Cezar
1 year ago.

Increased value to 50, doesn't work very well, but it's better than nothing. Thanks for help!

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