Features

  • Built using Angular Kanban component from DayPilot Pro for JavaScript

  • Displays a Kanban board with three custom columns/phases (Analysis/Draft/Testing)

  • Supports drag and drop moving of cards between Kanban columns

  • Customized Kanban card appearance (bar color)

  • Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

Kanban Component Configurator

This project was generated using Kanban UI Builder - an online configurator that lets you customize the control appearance and download a ready-to-run Angular 5 project.

Project Initialization

The attached Angular Kanban project requires that you have Angular CLI environment ready:

The project defines the dependencies in package.json file but the required modules are not included. You need to download the dependencies using npm:

npm install

When the required modules are ready (node_modules folder) you can run the project:

npm run start

Angular 5 Kanban Component

This is the main component that defines the Kanban board appearance and functionality.

The Kanban component properties are defined using config object. You can use this object to define additional properties and event handlers.

kanban.component.ts

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot, DayPilotKanbanComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}

@Component({
  selector: 'kanban-component',
  template: `<daypilot-kanban [config]="config" #kanban></daypilot-kanban>`,
  styles: [``]
})
export class KanbanComponent implements AfterViewInit {

  @ViewChild("kanban")
  kanban: DayPilotKanbanComponent;

  config: any = {
    columnWidthSpec: "Auto",
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.ds.getColumns().subscribe(result => this.config.columns = result);
    this.ds.getCards().subscribe(result => this.config.cards = result);
  }

}

Angular 5 Kanban Module

This module wraps the Kanban functionality. It includes the Kanban component (kanban.component.ts) and data service (data.service.tst) classes. It includes the dependencies (including DayPilot Pro Angular package) and export the customized KanbanComponent.

kanban.module.ts

import {DataService} from "./data.service";
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {KanbanComponent} from "./kanban.component";
import {DayPilotModule} from "daypilot-pro-angular";
import {HttpClientModule} from "@angular/common/http";

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    DayPilotModule
  ],
  declarations: [
    KanbanComponent
  ],
  exports:      [ KanbanComponent ],
  providers:    [ DataService ]
})
export class KanbanModule { }

Data Service

The data service defines the data source. In this sample project, the data (Kanban cards and columns) is defined statically. You can replace the data loading methods - getCards() and getColumns() - with an HTTP request.

data.service.ts

import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {DayPilot} from "daypilot-pro-angular";
import {HttpClient} from "@angular/common/http";

@Injectable()
export class DataService {

  cards: any[] = [
    {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"},
  ];

  columns: any[] = [
    {name: "Analysis", id: "1"},
    {name: "Draft", id: "2"},
    {name: "Testing", id: "3"}
  ];

  firstOfMonth(): DayPilot.Date {
    return DayPilot.Date.today().firstDayOfMonth();
  }

  constructor(private http : HttpClient){
  }

  getCards(): Observable<any[]> {

    // simulating an HTTP request
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.cards);
      }, 200);
    });

    // return this.http.get("/api/cards");
  }

  getColumns(): Observable<any[]> {

    // simulating an HTTP request
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.columns);
      }, 200);
    });
  }
}