Features

A boilerplate project that will help you with using Angular Kanban component from DayPilot Pro in your application.

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.

Project Initialization

The project needs to be initialized using npm:

npm install

This will download all required dependencies to node_modules directory.

Running the Project

The project can be started using npm:

npm run start

This command will start the embedded HTTP server and make the application accessible at http://localhost:4200.

Kanban Module

kanban.module.ts

import {DataService} from "./data.service";
import {HttpModule} from "@angular/http";
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";

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

Kanban Component

kanban.component.ts

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {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 = {
    cards: [],
    columns: []
  };

  constructor(private ds: DataService) {
  }

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

}

Backend Service

data.service.ts

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';
import {DayPilot} from 'daypilot-pro-angular';

@Injectable()
export class DataService {

  tasks: any[] = [
    {
      id: "1",
      text: "Task 1",
      column: "1",
      barColor: "#F6B26B"
    },
    {
      id: "2",
      text: "Task 2",
      column: "1",
      barColor: "#6AA84F"
    },
    {
      id: "3",
      text: "Task 3",
      column: "2"
    },
  ];

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

  constructor(private http : Http){
  }

  getCards(): Observable<any[]> {

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

    // return this.http.get("/api/cards").map((response:Response) => response.json());
  }

  getColumns(): Observable<any[]> {

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

    // return this.http.get("/api/columns").map((response:Response) => response.json());
  }

}