Features

New Version

There is a new version of this Angular project available:

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.

Scheduler UI Builder

This project was generated using Scheduler UI Builder. You can use this visual tool to configure the Scheduler appearance and properties and generate a downloadable project

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

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 { }