Tutorials
DayPilot Editions
Angular Kanban component is part of DayPilot Pro for JavaScript.
Online Configurator
Use the Kanban UI Builder to configure the Angular Kanban component and generate a downloadable Angular 6 project with all required dependencies.
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
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
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:
- DayPilot.Kanban.column.list (specifies the structure of the items in the .columns array)
Loading Swimlanes
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:
- DayPilot.Kanban.swimlanes.list (specifies the structure of the items in .swimlanes array)
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).