angularjs kanban board

DayPilot includes an AngularJS Kanban plugin. It is installed automatically if AngularJS is detected.

AngularJS Kanban Example

<script src="angular.min.js"></script>
<script src="daypilot-all.min.js"></script>

<div ng-app="main" ng-controller="KanbanCtrl" >
    <daypilot-kanban id="dp" config="config" ></daypilot-kanban>
</div>

<script type="text/javascript">

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

        //$scope.config = {};

        $scope.config = {
            columns: [
                {name: "Analysis", id: "1", barColor: "#f9ba25"},
                {name: "Draft", id: "2"},
                {name: "Testing", id: "3"}
            ],
            cards: [
                {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
                {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#1155CC"},
                {id: 3, "name": "Task 3", column: "1", text: "This is a description of task #3.", barColor: "#999"},
                {id: 4, "name": "Task 4", column: "1", text: "This is a description of task #4.", barColor: "#6AA84F"},
                {id: 5, "name": "Task 5", column: "2", text: "This is a description of task #5.", barColor: "#F6B26B"},
            ]
        };

    });

</script>

Demo

AngularJS Kanban Directive

You can display a Kanban board by adding <daypilot-kanban> directive to the HTML:

<script src="angular.min.js"></script>
<script src="daypilot-all.min.js"></script>

<div ng-app="main" ng-controller="KanbanCtrl" >
    <daypilot-kanban></daypilot-kanban>
</div>

The Kanban can be configured using "config" attribute of the <daypilot-kanban> element:

<script src="angular.min.js"></script>
<script src="daypilot-all.min.js"></script>

<div ng-app="main" ng-controller="KanbanCtrl" >
    <daypilot-kanban config="config"></daypilot-kanban>
</div>

The config attribute points to a variable that stores properties and event handlers that you would normally specify directly on the DayPilot.Kanban object (when using plain JavaScript API).

In addition to the standard properties the following shortcut properties are available:

  • "columns" - an array of columns (accessible as .columns.list in plain JavaScript API)
  • "cards" - an array of Kanban cards (accessible as .cards.list in plain JavaScript API)
  • "swimlanes" - an array of swimlanes (accessible as .swimlanes.list in plain JavaScript API)