angularjs scheduler

DayPilot Pro includes an AngularJS scheduler plugin.

AngularJS framework allows automatic two-way binding of UI controls and the underlying data. DayPilot includes an AngularJS Scheduler plugin that will let you take advantage of the smooth data binding system.

Demo

Tutorials

Installation

In order to use the AngularJS Scheduler from DayPilot Pro for JavaScript package you need to include two libraries:

  • angular.min.js

  • daypilot-all.min.js

Make sure that the AngularJS library is loaded first.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="daypilot-all.min.js" type="text/javascript"></script>

AngularJS Scheduler Element

The DayPilot Scheduler can be created using <daypilot-scheduler> AngularJS element.

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-scheduler></daypilot-scheduler>
</div>

AngularJS Scheduler Attributes

Supported attributes of the <daypilot-scheduler> element:

  • id

  • config (daypilot-config in older releases)

  • events (daypilot-events in older releases)

  • publish-as

The <daypilot-scheduler> element will be transformed into a <div> with the specified id attribute. This div will be used as a placeholder for the DayPilot Scheduler component.

The id attribute will be also used for storing the Daypilot.Scheduler object in the $scope object. You can use it to access the scheduler directly. 

You can also specify a custom target for the DayPilot.Scheduler object using publish-as attribute (see also the AngularJS controllerAs example)

The following example shows how to display a Scheduler message using a button. Note that the Scheduler object is stored in $scope.dp.

Example using $scope and "id" attribute:

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-scheduler id="dp" config="config" events="events" ></daypilot-scheduler>
  <div>
      Object:
      <button ng-click="message()">Show Message</button>
  </div>
</div>

<script>
  var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {

      $scope.config = {
        /* ... */
      };

      $scope.events = [ 
        /* ... */
      ];

      $scope.message = function() {
          $scope.dp.message("Hi");
      };
  });
</script>

Example using publish-as (Controller As syntax):

<div ng-app="main" ng-controller="SchedulerCtrl as ctrl" >
  <daypilot-scheduler id="dp" config="ctrl.config" events="ctrl.events" publish-as="ctrl.scheduler" ></daypilot-scheduler>
  <div>
      Object:
      <button ng-click="message()">Show Message</button>
  </div>
</div>

<script>
  var app = angular.module('main', ['daypilot']).controller('SchedulerCtrl', function() {
      this.config = {
        /* ... */
      };

      this.events = [ 
        /* ... */
      ];

      this.message = function() {
          this.scheduler.message("Hi");
      };
  });
</script>

The config attribute allows to specify the options object. It will let you specify the configuration options (e.g. a list of resources, start date) and event handlers. The options object structure follows the structure of the options parameter of the DayPilot.Scheduler() constructor.

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-scheduler id="dp" config="config" ></daypilot-scheduler>
</div>

<script>
  var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {

      $scope.config = {
          scale: "Day",
          days: 14,
          startDate: "2014-09-01",
          timeHeaders: [
              { groupBy: "Month" },
              { groupBy: "Day", format: "d" }
          ],
          resources: [
              { name: "Room B", id: "B" },
              { name: "Room C", id: "C" },
              { name: "Room D", id: "D" },
              { name: "Room E", id: "E" }
          ]
      };

  });

</script>

The events attribute allows you to specify the array with event data. The object with event data is bound using a separate attribute - refreshing events is faster than refreshing the full control when the configuration is changed.

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-scheduler id="dp" events="events" ></daypilot-scheduler>
</div>

<script>
  var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {

      $scope.events = [
          {
              start: new DayPilot.Date("2014-09-05T00:00:00"),
              end: new DayPilot.Date("2014-09-06T00:00:00"),
              id: DayPilot.guid(),
              resource: "B",
              text: "One-Day Event"
          }
      ];
  });

</script>

Adding a New Event

The scheduler watches the data object that holds the data (daypilot-events attribute). If you modify the data the scheduler will be updated automatically:

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-scheduler id="dp" config="config" events="events" ></daypilot-scheduler>
  <div>
      New event:
      <button ng-click="add()">Add</button>
  </div>
</div>

<script>

  // ...

      $scope.add = function() {
          $scope.events.push(
                  {
                      start: new DayPilot.Date("2014-09-05T00:00:00"),
                      end: new DayPilot.Date("2014-09-06T00:00:00"),
                      id: DayPilot.guid(),
                      resource: "B",
                      text: "One-Day Event"
                  }
          );
      };

  // ...

</script>

Event Handling

You can specify custom event handlers using the config ("config" attribute).

The following example adds an event handler for onEventMoved event. The event handler displays a message using the DayPilot.Scheduler objects stored in $scope.dp.

$scope.config = {
  onEventMoved: function(args) {
      $scope.dp.message("Event moved: " + args.e.text());
  },
  // ...

};

Changing Scheduler Configuration

The AngularJS Scheduler plugin watches the object specified using "config" attribute for changes. This means you can make configuration changes by modifying the config object.

The following example switches the Scheduler scale using two action links:

<div class="space">
  <span class="bold">Scale:</span>
  <a ng-click="scale('Day')" href="javascript:void(0)">Days</a>
  <a ng-click="scale('Week')" href="javascript:void(0)">Weeks</a>
</div>

<script type="text/javascript">

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

    // ...

    $scope.scale = function(val) {
      $scope.config.scale = val;
    };

  });

</script>

Scheduler UI Actions

Whenever the user modifies an event using the scheduler UI (drag and drop event moving, resizing, etc.) the underlying data object will be updated.

The AngularJS scheduler demo uses ng-repeat attribute to display the event data. You can see that all changes made using the scheduler UI will be immediately applied to the data source:

<div class="space">Event list:</div>
<ul>
  <li ng-repeat="item in events">
      {{item}}
  </li>
</ul>

Complete AngularJS Scheduler Example

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-scheduler id="dp" config="config" events="events" ></daypilot-scheduler>
  <div class="space">
      New event:
      <button ng-click="add()">Add</button>
  </div>
  <div class="space">
      First event:
      <button ng-click="move()">Move</button>
      <button ng-click="rename()">Rename</button>
  </div>
  <div class="space">
      <span class="bold">Scale:</span>
      <a ng-click="scale('Day')" href="javascript:void(0)">Days</a>
      <a ng-click="scale('Week')" href="javascript:void(0)">Weeks</a>
  </div>
  <div class="space">
      <div class="bold">Selected events (click or Ctrl+click to select):</div>
      <div ng-repeat="item in selectedEvents">
          {{item.text()}} - {{item.start()}}
      </div>
  </div>
</div>

<script type="text/javascript">
  var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {

      $scope.config = {
          scale: "Day",
          days: 365,
          startDate: "2014-09-01",
          onEventMoved: function(args) {
              $scope.dp.message("Event moved: " + args.e.text());
          },
          eventClickHandling: "Select",
          onEventSelected: function(args) {
              $scope.selectedEvents = $scope.dp.multiselect.events();
              $scope.$apply();
          },
          timeHeaders: [
              { groupBy: "Month" },
              { groupBy: "Cell", format: "d" }
          ],
          resources: [
              { name: "Room B", id: "B" },
              { name: "Room C", id: "C" },
              { name: "Room D", id: "D" },
              { name: "Room E", id: "E" }
          ]
      };

      $scope.events = [
          {
              start: new DayPilot.Date("2014-09-05T00:00:00"),
              end: new DayPilot.Date("2014-09-06T00:00:00"),
              id: DayPilot.guid(),
              resource: "B",
              text: "One-Day Event"
          }
      ];

      $scope.add = function() {
          $scope.events.push(
                  {
                      start: new DayPilot.Date("2014-09-05T00:00:00"),
                      end: new DayPilot.Date("2014-09-06T00:00:00"),
                      id: DayPilot.guid(),
                      resource: "B",
                      text: "One-Day Event"
                  }
          );
      };

      $scope.move = function() {
          var event = $scope.events[0];
          event.start = event.start.addDays(1);
          event.end = event.end.addDays(1);
      };

      $scope.rename = function() {
          $scope.events[0].text = "New name";
      };

      $scope.scale = function(val) {
          $scope.config.scale = val;
      };

  });

</script>

See Also

AngularJS Scheduler Module

The AngularJS Scheduler plugin is part of the "daypilot" module that is installed automatically if DayPilot detects AngularJS.

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

  // ...

});