Features

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. Buy a license.

Dependencies

After creating a new Angular project using Angular CLI it is necessary to add daypilot-pro-angular package from npm.daypilot.org:

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/8.4.2911.tar.gz --save

Scheduler Component

angular4-scheduler-component-configuration.png

The scheduler component is implemented using DayPilot Angular Scheduler component (DayPilotSchedulerComponent class, available as <daypilot-scheduler> in templates).

The component displays the scheduler by including <daypilot-scheduler> in a template:

@Component({
  // ...
  template: `<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>`,
  // ...
})

The configuration object (config attribute) is used to set the scheduler properties:

config: any = {
  timeHeaders : [
    {groupBy: "Month", format: "MMMM yyyy"},
    {groupBy: "Day", format: "d"}
  ],
  eventHeight: 40,
  scale: "Day",
  days: 31,
  startDate: "2017-05-01",
};

During initialization, it loads scheduler resources and events:

ngAfterViewInit(): void {
  this.ds.getResources().subscribe(result => this.config.resources = result);

  var from = this.scheduler.control.visibleStart();
  var to = this.scheduler.control.visibleEnd();
  this.ds.getEvents(from, to).subscribe(result => {
    this.events = result;
  });
}

Complete component source code:

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

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

  @ViewChild("scheduler")
  scheduler: DayPilotSchedulerComponent;

  events: any[] = [];

  config: any = {
    timeHeaders : [
      {groupBy: "Month", format: "MMMM yyyy"},
      {groupBy: "Day", format: "d"}
    ],
    eventHeight: 40,
    scale: "Day",
    days: 31,
    startDate: "2017-05-01",
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.ds.getResources().subscribe(result => this.config.resources = result);

    var from = this.scheduler.control.visibleStart();
    var to = this.scheduler.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe(result => {
      this.events = result;
    });
  }

}

Data Service

The DataService class is very simple - it simulates a remote backend using local fields.

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 {

  resources: any[] = [
    { name: "Resource 1", id: "R1"},
    { name: "Resource 2", id: "R2"}
  ];

  events: any[] = [
    {
      id: "1",
      resource: "R1",
      start: "2017-05-03",
      end: "2017-05-15",
      text: "Event 1"
    }
  ];

  constructor(private http : Http){
  }

  getEvents(from: DayPilot.Date, to: DayPilot.Date): Observable<any[]> {

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

    // return this.http.get("/api/events?from=" + from.toString() + "&to=" + to.toString()).map((response:Response) => response.json());
  }

  getResources(): Observable<any[]> {

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

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

}

Scheduler Module

The scheduler view (SchedulerComponent) and backend (DataService) is wrapped in a standalone module (SchedulerModule). Note that DayPilotModule from "daypilot-pro-angular" package is added to the "imports" section.

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 {SchedulerComponent} from "./scheduler.component";
import {DayPilotModule} from "daypilot-pro-angular";

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