angular-6-scheduler-component.png

Angular Scheduler is an interactive UI component that displays a timeline for multiple resources. You can use it to create complex scheduling applications with custom business rules.

The main design focus of the Angular Scheduler component is speed and scalability. The Scheduler can handle hundreds of rows/resources and thousands of events/tasks. The rendering is optimized - it only renders the data for the current viewport. The Scheduler can load additional data during scrolling and save network and CPU resources.

The Scheduler supports advanced features such as infinite scrolling, zoom, full-screen display, row collapse/expand animations.

You can use the full power of Angular framework and define the content of the Scheduler elements using Angular components. Display your own components in events, row headers, time headers or callouts.

The timeline on the X axis is fully customizable. You can hide non-business hours and days (no-continuous timeline is supported), define custom columns widths, time header rows (grouped by minute, hour, day, week, month, quarter, year).

You can start by generating a quick proof-of-concept Angular application that includes a pre-configured Scheduler component using the Scheduler UI Builder.

Tutorials

Feature Showcase (with Live Demos)

Basic Tutorials

Applications

Angular 8 Quick Start Project

Angular 7 Quick Start Project

Angular 6 Quick Start Projects

Angular 5 Quick Start Projects

Angular 4 Quick Start Projects

Scheduler UI Builder

scheduler-ui-builder-angular-javascript.png

Create a quick proof of concept using Scheduler UI Builder. You can use this visual tool to configure the Scheduler appearance and properties and generate a downloadable Angular project.

DayPilot Editions

Angular Scheduler requires DayPilot Pro for JavaScript.

NPM

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

Trial version:

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

Full version:

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

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

Angular CLI

Angular CLI is supported. For an example that uses Angular CLI 6.0 see the following tutorial:

Ahead-of-Time (AOT) Compilation

AOT compilation is supported since version 8.3.2769.

AOT support requires importing the DayPilotModule module instead of declaring the individual components from DayPilot.Angular.* namespace. The migration from DayPilot.Angular.* components is described in the AOT Compilation Tutorial.

Package Installation

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/xxxx.y.zzzz.tar.gz --save

You can get a link to the latest release at npm.daypilot.org.

Module Import

Import DayPilotModule from "daypilot-pro-angular" package:

// ...
import {DayPilotModule} from "daypilot-pro-angular";

@NgModule({
  imports:      [
    // ...
    DayPilotModule
  ],
  // ...
})
export class SchedulerModule { }

Displaying the Scheduler

Include <daypilot-scheduler> tag in the component template:

@Component({
  template: `<daypilot-scheduler></daypilot-scheduler>`,
  // ...
})
export class SchedulerComponent implements AfterViewInit {
  // ...
}

Scheduler Configuration

Use [config] attribute to specify the configuration object:

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

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

Example:

import {Component} from '@angular/core';
import {DayPilotSchedulerComponent} 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"
  }

}

Note: The current change detection implementation requires that the object is serializable using JSON.stringify().

Loading Event Data

Use [events] attribute to specify the object with event data:

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

The scheduler expects an array of items with structure described in DayPilot.Event.data documentation.

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 {DayPilotSchedulerComponent} 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" }
  ]

}

Note: The current change detection implementation requires that the object is serializable using JSON.stringify().

Event Handlers

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

Example that specifies onEventMoved event handler:

import {Component} from '@angular/core';
import {DayPilotSchedulerComponent} 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 Scheduler component works with two Scheduler objects:

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

You can get a reference to DayPilotSchedulerComponent using a hash attribute:

Template (HTML)

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

Component (TypeScript)

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

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

  @ViewChild("scheduler1")
  scheduler: DayPilotSchedulerComponent;

}

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

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

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

  @ViewChild("scheduler1")
  scheduler: DayPilotSchedulerComponent;

  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

There are a few thing to take into account when tuning the Scheduler performance in Angular. See Angular Performance.