angular-2-scheduler-component.png

Tutorials

Basic Tutorials

Applications

Feature Showcase

DayPilot Editions

Angular 2 Scheduler requires DayPilot Pro for JavaScript.

NPM

DayPilot Pro for Angular 2 NPM package is hosted at npm.daypilot.org.

Trial version:

  • https://npm.daypilot.org/daypilot-pro-angular/trial/x.y.zzzz.tar.gz

Full version:

  • https://npm.daypilot.org/daypilot-pro-angular/{api-key}/x.y.zzzz.tar.gz

Licensed customers can get the API key in the customer area.

Angular CLI

See the Scheduler Angular CLI Tutorial.

Quick Start

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

Displaying the Scheduler

<daypilot-scheduler></daypilot-scheduler>

Scheduler Configuration

Use [config] attribute:

<daypilot-scheduler [config]="config"></daypilot-scheduler>

The current change detection implementation requires that the object is serializable using JSON.stringify.

You can use the config object to specify custom properties and event handlers.

Example:

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

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`
})
export class AppComponent {

  config: any = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day"
  }

}

Loading Event Data

Use [events] attribute:

<daypilot-scheduler [events]="events"></daypilot-scheduler>

The current change detection implementation requires that the object is serializable using JSON.stringify.

You can use visibleStart() and visibleEnd() methods of the DayPilot.Scheduler object to get the grid boundaries. It's first available in ngAfterViewInit() event handler.

Example:

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

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler [config]="config" [events]="events"></daypilot-scheduler>`
})
export class AppComponent {

  config: any = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day",
    start: "2016-11-01",
    days: 30,
    resources: [
      { name: "Resource 1", id: "R1"} 
    ]
  }

  events: [
    { id: 1, start: "2016-11-21", end: "2016-11-24", resource: "R1", text: "Event 1" }
  ]

}

Event Handlers

You can specify the event handlers using the "config" object.

Example that specifies onEventMoved event handler:

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

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler [config]="config" [events]="events"></daypilot-scheduler>`
})
export class AppComponent {

  config: any = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day",
    start: "2016-11-01",
    days: 30,
    resources: [
      { name: "Resource 1", id: "R1"} 
    ],
    onEventMoved: args => {
      console.log("Event moved");
    }
  }

  events: [
    { id: 1, start: "2016-11-21", end: "2016-11-24", resource: "R1", text: "Event 1" }
  ]

}

DayPilot.Scheduler Object

The Angular 2 Scheduler component works with two Scheduler objects:

  • DayPilot.Angular.Scheduler => Angular 2 Component (<daypilot-scheduler> tag)
  • DayPilot.Scheduler => Underlying plain JavaScript object (DayPilot.Scheduler class)

You can get a reference to DayPilot.Angular.Scheduler using a hash attribute:

Template (HTML)

<daypilot-scheduler #scheduler1></daypilot-scheduler>

Component (TypeScript)

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

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler #scheduler1></daypilot-scheduler>`
})
export class AppComponent {

  @ViewChild("scheduler1")
  scheduler: DayPilot.Angular.Scheduler;

}

This object exposes the underlying DayPilot.Scheduler object using a "control" property:

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

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler #scheduler1></daypilot-scheduler>`
})
export class AppComponent {

  @ViewChild("scheduler1")
  scheduler: DayPilot.Angular.Scheduler;

  message() {
    this.scheduler.control.message("Welcome!");
  }  

}

Calling DayPilot.Scheduler Methods

You can use the DayPilot.Scheduler API directly. In order to call the Scheduler methods you need to get the DayPilot.Scheduler object reference (using "control" property):

Performance

The Scheduler performance in Angular 2 is affected by two Angular-specific factors:

  1. UI updates after a change
  2. Change detection

UI Update after a Change

Changing the config always results in full Scheduler refresh (equivalent of calling .update()). This is a relatively quick operation which only draws the current viewport with the default settings and usually doesn't take longer than 200-300ms.

Changing the events results in an update of individual events (up to 10 events are changed) or a full refresh (11 or more events are changed).

Change Detection

The state of config and events is checked during every change detection cycle (handled by zone.js). The change detection cycle is fired very often - it's triggered by even a minor UI change such as a mouse move.

For small config and events object this doesn't mean any performance problem but with a growing number of resources (specified in config object) and events (events attribute) it can become a significant burden. It can affect overall UI performance (no only interaction with the Scheduler control).

You can switch to using the native API to avoid this problem.

Loading resources

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

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler [config]="config" #scheduler1></daypilot-scheduler>`
})
export class AppComponent {

  @ViewChild("scheduler1")
  scheduler: DayPilot.Angular.Scheduler;

  config: any = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day",
    start: "2016-11-01",
    days: 30
  }

  loadResources(resources) {
    var dp = this.scheduler.control;
    dp.resources = resources;
    dp.update();
  }  

}

You can continue using the "config" attribute for the Scheduler configuration but don't include "resources" property (it would override the value that was set directly).

Loading events

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

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler #scheduler1></daypilot-scheduler>`
})
export class AppComponent {

  @ViewChild("scheduler1")
  scheduler: DayPilot.Angular.Scheduler;

  loadEvents(events) {
    var dp = this.scheduler.control;
    dp.events.list = events;
    dp.update();
  }  

}