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

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

Asked by dodegaard
4 years ago.

I need to be able to click on a button in another part of our Angular app and have the scheduler open, directive loads it up with entire period of rows and events and THEN focus on the one of interest. Preferably it would either focus it in the center of the control or upper left corner. Do you happen to have any examples of this or hints on how to make happen? Thanks.

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

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;
});
Comment posted by Anonymous
4 years ago.

Hi,

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

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

Thanks,

Ryan

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

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

Comment posted by Doug Odegaard
4 years ago.

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);
}

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