angular-kanban-component.png

Tutorials

DayPilot Editions

Angular Kanban component is part of DayPilot Pro for JavaScript.

NPM

DayPilot Pro for Angular NPM package is hosted at npm.daypilot.org.

Trial version:

  • https://npm.daypilot.org/daypilot-pro-angular/trial/x.y.zzzz.tar.gz

Full version:

  • https://npm.daypilot.org/daypilot-pro-angular/{api-key}/x.y.zzzz.tar.gz

Licensed customers can get the API key in the customer area. Don't forget to replace "x.y.zzzz" with the actual version number.

Package Installation

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/x.y.zzzz.tar.gz --save

You can get a link to the latest release at npm.daypilot.org. Don't forget to replace "x.y.zzzz" with the actual version number.

Module Import

Import DayPilotModule from "daypilot-pro-angular" package:

// ...import {DayPilotModule} from "daypilot-pro-angular";

@NgModule({
  imports:      [
    // ...
    DayPilotModule
  ],
  // ...
})
export class KanbanModule { }

Displaying the Kanban Component

As soon as DayPilotModule is imported you can insert the Kanban in the component template usig <daypilot-kanban> tag:

@Component({
  template: `<daypilot-kanban></daypilot-kanban>`,
  // ...
})
export class KanbanComponent {
  // ...
}

Kanban Configuration

Use [config] attribute to specify the configuration object:

<daypilot-kanban [config]="config"></daypilot-kanban>

You can use the config object to specify custom properties and event handlers.

Example:

import {Component} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban [config]="config"></daypilot-kanban>`
})
export class KanbanComponent {

  config: any = {
    // ...
  }

}

Note: The current change detection implementation requires that the config object is serializable using JSON.stringify().

Loading Kanban Card Data

angular-kanban-cards.png

Use .cards property of the config object to specify the array with card data. The Kanban component expects an array of objects with structure described in DayPilot.Kanban.cards.list documentation.

Example:

import {Component} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban [config]="config"></daypilot-kanban>`
})
export class KanbanComponent {

  config: any = {
    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"},
    ],
    // ...
  }
}

Note: The current change detection implementation requires that the object is serializable using JSON.stringify().

Loading Kanban Columns

angular-kanban-columns.png

The Kanban columns can be specified using .columns property of the config object:

import {Component} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban [config]="config"></daypilot-kanban>`
})
export class KanbanComponent {

  config: any = {
    columns: [
        {name: "Analysis", id: "1", barColor: "#f9ba25"},
        {name: "Draft", id: "2"},
        {name: "Testing", id: "3"}
    ],
    // ...
  }
}

See also:

Loading Swimlanes

angular-kanban-swimlanes.png

The swimlanes can be specified using .swimlanes property of the config object:

import {Component} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban [config]="config"></daypilot-kanban>`
})
export class KanbanComponent {

  config: any = {
    swimlanes: [
        {name: "Swimlane A", id: "A"},
        {name: "Swimlane B", id: "B"}
    ],
    // ...
  }
}

Swimlanes are optional. If the .swimlanes property is not specified a single default swimlane will be used.

See also:

Event Handlers

You can specify the event handlers using the "config" object.

Example that specifies onEventMoved event handler:

import {Component} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban [config]="config"></daypilot-kanban>`
})
export class KanbanComponent {

  config: any = {
    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"},
    ],
    onCardMoved: args => {
      console.log("Event moved");
    }
    // ...
  }
}

DayPilot.Kanban Object

The Angular Kanban component works with two Kanban objects:

  • DayPilotKanbanComponent => Angular 2+ Component (<daypilot-kanban> tag)
  • DayPilot.Kanban=> Underlying plain JavaScript object (DayPilot.Kanban class)

You can get a reference to DayPilotKanbanComponent using a hash attribute:

Template (HTML)

<daypilot-kanban #kanban></daypilot-kanban>

Component (TypeScript)

import {Component, ViewChild} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban #kanban></daypilot-kanban>`
})
export class KanbanComponent {

  @ViewChild("kanban")
  kanban: DayPilotKanbanComponent;

}

This object exposes the underlying DayPilot.Kanban object using a "control" property:

import {Component, ViewChild} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban #kanban></daypilot-kanban>`
})
export class KanbanComponent {

  @ViewChild("kanban")
  kanban: DayPilotKanbanComponent;


  message() {
    this.kanban.control.message("Welcome!");
  }  

}

Calling DayPilot.Kanban Methods

You can use the DayPilot.Kanban API directly. In order to call the Kanban control methods you need to get the DayPilot.Kanban object reference (using "control" property).