Scroll to a specific time in the day

Asked by Luca
3 years ago.

Hi!

We are building a single day scheduler starting from 00:00 and ending at 23:59.
We would like to display the timeline view in order to show the first event of the day on page open. Now the view starts at midnight.

We are trying to use the ScrollTo (and its variants) method to move the active view to the first event (which is a given time in the day, hours and minutes), but we are unable to make it work.

We tried both with the scrollToResource method (although it seems to be made for moving to particular rows and not cells on the X axis) and with the setScrollX methods. No luck with both of them.

Can you have a look at the code to check if we are making any mistakes?

Thanks!


const dp = new DayPilot.Scheduler("dp", {
	startDate: '2020-09-27T00:00:00',
	cellWidth: 40,
	days: 1,
	cellDuration: 15,
	scale: "CellDuration",
	timeFormat: "Clock24Hours",
	timeHeaders: [
		{groupBy: "Day", format: "dddd, dd MMMM yyyy"},
		{groupBy: "Hour"},
		{groupBy: "Cell"}
	],
	showCurrentTime: true,
	showToolTip: false,
	eventMovingStartEndEnabled: false,
	eventMoveToPosition: false,
	eventResizingStartEndEnabled: false,
	timeRangeSelectingStartEndEnabled: false,
	allowEventOverlap: true,
	eventHoverHandling: false,
	eventResizeHandling: "Disabled",
	eventRightClickHandling: "Disabled",
	eventMoveHandling: "Disabled",
	heightSpec: "Auto",
	treeEnabled: true,
	treePreventParentUsage: true,
	rowHeaderColumns: [{text: 'Zona',display: "name"},{text: 'Posti',display: "seats"}],
});
dp.init();
dp.rows.load("backend/api/timeline/zone");
dp.events.load("backend/api/timeline/events", function (){
	console.log('COMPLETED');
	// Not Working
	dp.scrollTo('2020-09-27T15:00:00');
});
// Not Working
dp.scrollTo('2020-09-27T15:00:00');

// Not Working
dp.setScrollX(400);

Thanks!

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

The scrollTo() call only works if the grid is already displayed and has non-zero dimensions. Since you define no resources before init() it can't scroll until the resources are loaded.

There are two options:

1. Include a dummy resource in the initial config:

const dp = new DayPilot.Scheduler("dp", {
  resources: [ {name: "Loading...", id: "L"} ],
  // ...

In this case you can set the scrollbar position right away:

const dp = new DayPilot.Scheduler("dp", {
  resources: [ {name: "Loading...", id: "L"} ],
  scrollTo: "2020-09-27T15:00:00",
  // ...

2. Add it to the rows.load() success handler like this:

dp.rows.load("backend/api/timeline/zone", function(args) {
    args.preventDefault();
    dp.update({
        resources: args.data,
        scrollTo: "2020-09-27T15:00:00"
    });
});

You need to call update() manually because the success handler is called before the actual rows update.

Let me know if it didn't help.

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

OK, I did a couple of tests and the resources don't have to be loaded for the scrollTo() method to work (at least in Chrome and Firefox). However, the root cause is most likely the same - make sure that the Scheduler is visible when you call scrollTo().

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

Scroll to a specific time in the day

Products

Learn

Get Support

DayPilot Pro