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.

Project Structure

This project builds on the boilerplate project generated using the DayPilot Scheduler UI Builder. For an introduction to using the Angular Scheduler component please see the Angular Scheduler Tutorial.

Initialize the Angular Project

The downloadable project doesn't include NPM dependencies (node_modules) and it's necessary to initialize it using npm install before use:

npm install

Run the Project

You can run the Angular project locally using the built-in development server:

npm run start

The application will be available at http://localhost:4200.

Display Event Links in the Scheduler Component

The Scheduler event links can be passed to the Angular Scheduler component using the links input. In this Angular sample, the Scheduler configuration, resources, events, and links are stored in signals so updates are picked up by the DayPilot Angular component:

resources = signal<DayPilot.ResourceData[]>([]);

events = signal<DayPilot.EventData[]>([]);

links = signal<DayPilot.LinkData[]>([]);

config = signal<DayPilot.SchedulerConfig>({
  timeHeaders: [{groupBy: 'Month'}, {groupBy: 'Day', format: 'd'}],
  scale: 'Day',
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  timeRangeSelectedHandling: 'Disabled'
});

Event links have been supported in the Angular Scheduler component since version 8.4.2942.

Each link specifies the source event (from), target event (to), and link type. This sample uses "FinishToStart" links from Event 1 to the two following events:

links: DayPilot.LinkData[] = [
  {from: '1', to: '2', type: 'FinishToStart'},
  {from: '1', to: '3', type: 'FinishToStart'},
];

When the links are loaded, set the links signal. The Angular Scheduler component receives it through the [links] binding:

this.ds.getLinks().subscribe(result => {
  this.links.set(result);
});

The full Scheduler component loads resources, events, and links from the data service. The visible range is set to the current month so the sample events remain visible without hard-coded historical dates.

scheduler.component.ts

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

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

  @ViewChild('scheduler')
  scheduler!: DayPilotSchedulerComponent;

  resources = signal<DayPilot.ResourceData[]>([]);

  events = signal<DayPilot.EventData[]>([]);

  links = signal<DayPilot.LinkData[]>([]);

  config = signal<DayPilot.SchedulerConfig>({
    timeHeaders: [{groupBy: 'Month'}, {groupBy: 'Day', format: 'd'}],
    scale: 'Day',
    days: DayPilot.Date.today().daysInMonth(),
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    timeRangeSelectedHandling: 'Disabled'
  });

  constructor(private ds: DataService) {
  }

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

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

    this.ds.getLinks().subscribe(result => {
      this.links.set(result);
    });
  }

}

Data Service

The data service defines three sample events in the current month and two FinishToStart links. The methods simulate HTTP calls using Observable; you can replace the simulated responses with real HttpClient requests when loading resources, events, and links from a backend.

data.service.ts

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {DayPilot} from 'daypilot-pro-angular';
import {Observable} from 'rxjs';

@Injectable()
export class DataService {

  private readonly monthStart = DayPilot.Date.today().firstDayOfMonth();

  resources: DayPilot.ResourceData[] = [
    {name: 'Resource 1', id: 'R1'},
    {name: 'Resource 2', id: 'R2'},
    {name: 'Resource 3', id: 'R3'},
    {name: 'Resource 4', id: 'R4'},
    {name: 'Resource 5', id: 'R5'},
    {name: 'Resource 6', id: 'R6'},
    {name: 'Resource 7', id: 'R7'},
    {name: 'Resource 8', id: 'R8'},
    {name: 'Resource 9', id: 'R9'},
  ];

  events: DayPilot.EventData[] = [
    {
      id: '1',
      resource: 'R2',
      start: this.monthStart.addDays(2),
      end: this.monthStart.addDays(5),
      text: 'Event 1'
    },
    {
      id: '2',
      resource: 'R5',
      start: this.monthStart.addDays(6),
      end: this.monthStart.addDays(11),
      text: 'Event 2'
    },
    {
      id: '3',
      resource: 'R4',
      start: this.monthStart.addDays(12),
      end: this.monthStart.addDays(14),
      text: 'Event 3'
    },
  ];

  links: DayPilot.LinkData[] = [
    {from: '1', to: '2', type: 'FinishToStart'},
    {from: '1', to: '3', type: 'FinishToStart'},
  ];

  constructor(private http: HttpClient) {
  }

  getEvents(from: DayPilot.Date, to: DayPilot.Date): Observable<DayPilot.EventData[]> {
    // Simulating an HTTP request.
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.events);
      }, 200);
    });

    // return this.http.get<DayPilot.EventData[]>("/api/events?from=" + from.toString() + "&to=" + to.toString());
  }

  getResources(): Observable<DayPilot.ResourceData[]> {
    // Simulating an HTTP request.
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.resources);
      }, 200);
    });

    // return this.http.get<DayPilot.ResourceData[]>("/api/resources");
  }

  getLinks(): Observable<DayPilot.LinkData[]> {
    // Simulating an HTTP request.
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.links);
      }, 200);
    });

    // return this.http.get<DayPilot.LinkData[]>("/api/links");
  }

}

History

  • May 11, 2026: Updated the project to the current Angular standalone/signals structure. Using links, resources and events attributes.