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

Multiple Schedulers Scroll Lock

Asked by Anonymous
4 months ago.

Is there a way to have 2 (or more) schedulers and when you scroll one, they all scroll together?

I have two schedulers on the same page, using the same date range but showing different data. One is showing read only data, the other is showing writable data. Each data set is from different sources.

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

Yes, but you need to do it on the client side:

    // scrollbar synchronization
    $(document).ready(function() {
        $(dp.nav.scroll).scroll(function() {
            dp2.nav.scroll.scrollLeft = dp.nav.scroll.scrollLeft;
        });

        $(dp2.nav.scroll).scroll(function() {
            dp.nav.scroll.scrollLeft = dp2.nav.scroll.scrollLeft;
        });
    });

Please see the following demo from the JavaScript version:

https://javascript.daypilot.org/demo/scheduler/eventmovingtwoschedulers.html

Comment posted by Anonymous
4 months ago.

Thanks Dan.

Comment posted by Anonymous
3 months ago.

Dan ... I can't get it working ... this is what I have.

$(document).ready(function() {
var dps1 = DayPilot.Scheduler("dps1");
var dps2 = DayPilot.Scheduler("dps2");

$(dps1.nav.scroll).scroll(function() {
dps2.nav.scroll.scrollLeft = dps1.nav.scroll.scrollLeft;
});

$(dps2.nav.scroll).scroll(function() {
dps1.nav.scroll.scrollLeft = dps2.nav.scroll.scrollLeft;
});
});

Its not throwing any errors.

Comment posted by Dan Letecky [DayPilot]
3 months ago.

In ASP.NET WebForms, the DayPilot.Scheduler instance is created automatically. The name of the object is specified using ClientObjectName property. If it's not specified, the ASP.NET client-side component name will be used (this name is derived from the control name and its location on page).

So the easiest way to get it working is to add ClientObjectName="dps1" to the first Scheduler control and ClientObjectName="dps2" to the second Scheduler control (on the server side). And remove the "var dps1 =" and "var dps2 =" lines.

Comment posted by Anonymous
3 months ago.

Mistake in there ... The vars should be

var dps1 = new DayPilot.Scheduler("dps1");
var dps2 = new DayPilot.Scheduler("dps2");

Comment posted by Anonymous
3 months ago.

Thanks for that ... all works.

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