The update() methods updates the control after changing the properties. Refreshes the scheduler control, including headers, background cells, and events. It is also possible to update the scheduler configuration using the optional options parameter.




  • options - object with properties and events to be updated (object)

Even if the options parameter is not specified, all changes made directly to the DayPilot.Scheduler object properties will be applied during the update.

Updating Scheduler Configuration using "options" Parameter

It is possible to update Scheduler properties and events using the "options" parameter.

dp.update({ separators: [{color:"red", location: new DayPilot.Date()}] });

Supported since version 2018.1.3169.

Special Properties

The options object can specify any of the top-level properties. In addition to the standard properties, the following special properties are supported:

  • scrollTo - scrolls to the specified date/time after update (see also scrollTo() method)
  • scrollX - scrolls to the specified x position (in pixels) after update
  • scrollY - scrolls to the specified y position (in pixels) after update
  • scrollToPosition - the target position (as defined in scrollTo() method "position" parameter)
  • scrollToAnimation- the scrolling animation (as defined in scrollTo() method "animated" parameter)
  • events - the value (array of events) will be saved to events.list before update
  • links - the value (array of links) will be saved to links.list before update

Example (scrollTo)

dp.update({scrollTo: "2018-10-01"});

corresponds to 


Example (events)

dp.update({events: [ {id: 1, start: ..... } ... ]});

corresponds to 

dp.update({events: [ {id: 1, start: ..... } ... ]});

Optimized Update

An optimized update is performed if the only property in the options object is one of these properties:

  • separators
  • events
  • rowHeaderColumns


Changing properties directly:

dp.separators = [{color:"red", location: new DayPilot.Date()}];

Changing properties using options parameter:

dp.update({ separators: [{color:"red", location: new DayPilot.Date()}] });

AngularJS Example

Note: The DayPilot.Scheduler object is stored in the $scope under the name specified using id attribute ($scope.dp in this example).

<div ng-app="main" ng-controller="SchedulerCtrl" >
  <daypilot-scheduler id="dp" daypilot-config="config" daypilot-events="events" ></daypilot-scheduler>
      <button ng-click="update()">Refresh the Scheduler</button>

  var app = angular.module('main', ['daypilot']).controller('SchedulerCtrl', function($scope) {
  // ...

      $scope.update = function() {

  // ...