AngularJS

AngularJS framework allows automatic two-way binding of UI controls and the underlying data. DayPilot includes a Gantt AngularJS plugin that will let you use the Gantt component with AngularJS and take advantage of the smooth data binding.

Demo

• AngularJS Gantt Chart Demo

Installation

The AngularJS library must be loaded before DayPilot library (daypilot-all.min.js).

<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 Gantt Element

The DayPilot Gantt chart can be created using <daypilot-gantt> AngularJS element.

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

AngularJS Gantt Attributes

Supported attributes of the <daypilot-gantt> element:

• id
• daypilot-config

The id attribute will be used for the main <div> element id attribute. It will be also used for storing the Daypilot.Gantt object in the $scope object.

The daypilot-config attribute allows to specify the options object. It will let you specify the configuration options, event handlers and load tasks and links. The options object structure follows the structure of the options parameter of the DayPilot.Gantt() constructor.

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

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

  $scope.config = {
      scale: "Day",
      timeHeaders: [
          { groupBy: "Month" },
          { groupBy: "Day", format: "d" }
      ],
      tasks: [
          {
              start: new DayPilot.Date("2014-09-05T00:00:00"),
              end: new DayPilot.Date("2014-09-06T00:00:00"),
              id: DayPilot.guid(),
              text: "One-Day Event"
          }
      ]
  };

</script>

AngularJS Gantt Example

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-gantt id="dp" daypilot-config="config" ></daypilot-gantt>
  <div>
      New task:
      <button ng-click="add()">Add</button>
  </div>
  <div>
      First task:
      <button ng-click="move()">Move</button>
      <button ng-click="rename()">Rename</button>
  </div>
  <div>
      Object:
      <button ng-click="message()">Show Message</button>
  </div>
  <div>
      Task array (debug):
      <div ng-repeat="item in config.tasks">
          {{item}}
      </div>

  </div>
</div>

<script type="text/javascript">

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

      $scope.config = {
          scale: "Day",
          timeHeaders: [
              { groupBy: "Month" },
              { groupBy: "Day", format: "d" }
          ],
          tasks: [
              {
                  start: new DayPilot.Date("2014-09-05T00:00:00"),
                  end: new DayPilot.Date("2014-09-06T00:00:00"),
                  id: DayPilot.guid(),
                  text: "One-Day Event"
              }
          ]
      };

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

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

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

      $scope.message = function() {
          $scope.dp.message("Hi");
          console.log($scope.dp);
      };

  });

</script>

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

  // ...

}