Open DayPilot for specific date + event and set focus - Example?

You can use .scrollTo(date, animation, target) method to scroll to a specific date:

http://api.daypilot.org/daypilot-scheduler-scrollto/

You can use .scrollToResource() method to scroll vertically to a specific resource:

http://api.daypilot.org/daypilot-scheduler-scrolltoresource/

See an online demo here:

http://javascript.daypilot.org/demo/scheduler/scrolling.html

In AngularJS you can also use the following properties instead of the direct scrollTo() method:

scrollTo
scrollToAnimated
scrollToPosition

This approach is used in the AngularJS Hotel Room Booking tutorial:
http://code.daypilot.org/77465/angularjs-hotel-room-booking

$http.post("backend_events.php", params).success(function(data) {
  if (day) {
    $scope.schedulerConfig.timeline = getTimeline(day);
    $scope.schedulerConfig.scrollTo = day;
    $scope.schedulerConfig.scrollToAnimated = "fast";
    $scope.schedulerConfig.scrollToPosition = "left";
  }
  $scope.events = data;
});

Hi,

Is it possible to scroll to a specific date & time?, for example...

$scope.schedulerConfig.scrollTo = "2015-11-18T19:30:00";

Thanks,

Ryan

Yes, you can use any date and time value. If it is not in the visible range it will scroll to the closest edge.

In Angular when opening the Scheduler I did have a problem where the .scrollToResource was not working properly so I had to inject a $timeout to make it actually work. When performed by a button outside the Scheduler once rndered the method worked just fine as well but if .scrollToResource is used during the onAfterRender or other events it seems not to work.

if ($scope.focusedResourceId > 0) {
$timeout(function () {
$scope.dp.scrollToResource($scope.focusedResourceId);
$scope.focusedResourceId = 0;
}, 1000);
}