Tutorial: Angular 2 Scheduler (TypeScript, PHP)

Features

• Sample project that shows how to use DayPilot Scheduler with Angular 2.
• Written in TypeScript.
• It uses npm package manager to handle dependencies.
• The Angular 2 version of DayPilot Pro is available as a special npm module published at npm.daypilot.org.
• Configuration required for using the Scheduler.
• Loading resources and events using a HTTP service (REST interface).
• Drag and drop event moving and resizing.
• Uses DayPilot Pro for JavaScript (trial version)
• Sample PHP backend

Source code of the tutorial is available for download.

Example: Scheduler Component Class

app.component.ts

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

@Component({
    selector: 'app',
    template: `
        <h1>{{name}}</h1>
        <daypilot-scheduler [events]="events" [config]="config" #scheduler1></daypilot-scheduler>
        <button (click)="add()">Add event</button>
        `
})
export class AppComponent {
    name: string;
    last: number = 1;
    @ViewChild('scheduler1') scheduler1: DayPilot.Angular.Scheduler;

    events: any[] = [
        {start: "2016-09-09", end: "2016-09-10", id: 1, text: "Event 1", resource: "R1"}
    ];

    config: any = {
        scale: "Day",
        startDate: "2016-09-01",
        days: new DayPilot.Date("2016-09-09").daysInMonth(),
        timeHeaders: [
            {groupBy: "Month"},
            {groupBy: "Day", format: "d"}
        ],
        cellWidthSpec: "Auto",
        resources: [
            {name: "R1", id: "R1"},
            {name: "R2", id: "R2"},
            {name: "R3", id: "R3"},
        ],
        onTimeRangeSelected: args => {
            alert("start: " + args.start);
        },
        onEventClicked: args => {
            alert("clicked: " + args.e.text());
        },
        onEventMoved: args => {
            this.scheduler1.control.message("Moved");
        },
        onEventResized: args => {
            this.scheduler1.control.message("Moved");
        }
    };

    constructor() {
        this.name = 'Scheduler';
    }

    add() {
        this.last += 1;
        this.events.push({start: "2016-09-09", end: "2016-09-10", id: this.last, text: "Event " + this.last, resource: "R1"});
        this.scheduler1.control.message("Added");
    }


}