Skip to content
DayPilot

Callendars scrollbars working as one

Asked by Cezar
9 years ago.

I have 2 calendars on my page and the question is: Is that possible to make both caledars scrollbars working as once? When I scroll down on one calendar it scrolls down on second as well?

how-tomvc
Comment posted by Dan Letecky [DayPilot]
9 years ago.

You can synchronize the calendar scrollbars like this: 

@Html.DayPilotCalendar("dpc1", ...)

@Html.DayPilotCalendar("dpc2", ...)

<script>
dpc1.nav.scroll.onscroll = function() {
  dpc2.nav.scroll.scrollTop =   dpc1.nav.scroll.scrollTop;
}
dpc2.nav.scroll.onscroll = function() {
  dpc1.nav.scroll.scrollTop =   dpc2.nav.scroll.scrollTop;
}
</script>
Answer posted by Dan Letecky [DayPilot]
9 years ago.

You're right, sorry. The latest version requires a different syntax. 

@Html.DayPilotCalendar("dpc1", ...)

@Html.DayPilotCalendar("dpc2", ...)

<script>
dpc1.nav.bottomRight.addEventListener("scroll", function() {
  dpc2.nav.bottomRight.scrollTop =   dpc1.nav.bottomRight.scrollTop;
});
dpc2.nav.bottomRight.addEventListener("scroll", function() {
  dpc1.nav.bottomRight.scrollTop =   dpc2.nav.bottomRight.scrollTop;
});
</script>

Please note that it uses an internal API that can change in the future.

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